Drop down not closing with ngx-chips angular 2

Question

I am trying to use ngx-chips for tag based dropdown. Below is the code that I am using:

   <tag-input [onlyFromAutocomplete]="true" formControlName="data">
        <tag-input-dropdown [identifyBy]="'data'" [showDropdownIfEmpty]="true" [autocompleteItems]="dataObject"  [appendToBody]="false"></tag-input-dropdown>
  </tag-input>

I am using the above code in bootstrap model. But when I tried to close the dropdown list clicking any where on model, it is not closing. So, I tried to add [appendToBody]="false" and it fixed the issue but now the position of dropdown got disturb.

Please let me know possible solution for it.

score 4 · Answer 1 · answered Oct 08 '18 at 15:37

4

keepOpen - [?boolean]

To use in conjunction with showDropdownIfEmpty. If set to false, the dropdown will not reopen automatically after adding a new tag. (defaults to true).

[keepOpen]="false"

answered Oct 08 '18 at 15:37

MAnna

41
2

score 0 · Answer 2 · edited Oct 15 '20 at 18:16

MAnnas answer helps, because the dropdownmenu wont open on entering keywords with the keyboard, but if you happen to click with the mouse and still open it, there is this:

add [appendToBody] = "false" to tag-input-dropdown and then add following CSS in global styles.css:

.ng2-dropdown-menu {
   position: absolute !important;
   left: 2% !important;
   top: 100% !important;
}

Credit goes to this Github issue

score 0 · Answer 3 · answered Oct 26 '20 at 11:04

0

I hade the same issue, solution that worked for me was this: https://github.com/Gbuomprisco/ngx-chips/issues/783#issuecomment-546414947

Also adding [keepOpen]="false" made things better.

answered Oct 26 '20 at 11:04

Ibrahim S. Gerbiqi

254
3
18

Drop down not closing with ngx-chips angular 2

3 Answers3