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.

Answer 1

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"

Answer 2

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

Answer 3

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.