Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

showDropdownIfEmpty option makes overlay appear after tag add

See original GitHub issue

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
~~[ ] feature request~~ [new feature requests are not considered at this time]
[ ] support request/question

Current behavior I’m using the tag-input with the showDropdownIfEmpty option and the following issue happens: I focus the input, the dropdown shows up (along with its backdrop); now if I select an element, the dropdown and backdrop will disappear, for the backdrop to then suddenly appear (without the dropdown) and cover the whole screen, forcing me to click again to use the interface.

This is my setup:

<tag-input
      [placeholder]="''"
      [secondaryPlaceholder]="''"
      [name]="filter.key"
      [ngModel]="filter.value"
      (ngModelChange)="updateFilter($event)"
      [onlyFromAutocomplete]="true"
      [ripple]="false">
      <tag-input-dropdown [showDropdownIfEmpty]="true"
                          [autocompleteItems]="filter.options">
      </tag-input-dropdown>
    </tag-input>

Expected behavior

The overlay should not appear.

Minimal reproduction of the problem with instructions (if applicable)

This is the sequence of events:

focus the tag-input, dropdown appears select an item, it gets added, the dropdown disappears the tag-input automatically gets focused again, and the overlay appears again

What is the motivation / use case for changing the behavior? (if applicable)

What do you use to build your app?. Please specify the version

Angular-CLI

Angular version:

4.2.5

ngx-chips version: 1.4.6