Dropdown not closing inside a bootstrap modal

[lucas-carneiro]

I'm submitting a ...

[x] bug report => search github for a similar issue or PR before submitting
[ ] support request/question

Current behavior When I use the tag-input-dropdown component inside a bootstrap (v 4.0.0+) modal, I can't close the dropdown menu clicking inside the modal. If I change the appendToBody property to false, is possible to close it by clicking inside, but its position is changed, appearing outside the modal. Note: I found someone who had the same problem on StackOverflow, but without answers/comments.

Expected behavior There are 2 options here:

• The dropdown would be successfully closed when clicking inside the modal without changing the value of appendToBody.
• The dropdown would be successfully closed when clicking inside the modal afterchanging the value of appendToBody, but its position would stay the same as option 1.

Minimal reproduction of the problem with instructions (if applicable) https://stackblitz.com/edit/angular-jmsqe1 Note: The dropdown position problem can be better seen by clicking on "Open in New Window" option in StackBlitz.

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

Angular version: 6.0.7

ngx-chips version: 1.9.2

Browser: Tested on Chrome 67

[lucianojs]

I have same problem here.

[Tawsif]

Any fix or solution to this?

[Gbuomprisco]

I think the modal is preventing blur events. That's the issue.

[Tawsif]

@lucianojs @Gbuomprisco @lucas-carneiro I have a temporary fix for this issue:

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; }

[cesaric]

To get the dropdown to hide in a modal/pop-up, [appendToBody]="false" was messing up positioning of the tag-input-dropdown so I set it to:

<tag-input-dropdown
[appendToBody]="true"
[zIndex]="2000"
>

and then did the following in my modal component:

  @ViewChild(TagInputComponent)
  tagInput: TagInputComponent;
  @ViewChild(TagInputDropdown)
  tagInputDropdown: TagInputDropdown;
  

  @HostListener('click')
  onClick()
  {
    if (!this.tagInput.isInputFocused() && this.tagInputDropdown.isVisible) {
      this.tagInputDropdown.hide();
    }
  }

Hacky but it works (I couldn't get a blur event fix sorted).

[Update] Here's a simpler update to the above in case you have multiple ngx-chip controls in the same modal/pop-up:

@ViewChildren(TagInputComponent)
private tagInputs: QueryList<TagInputComponent>;


 @HostListener('click')
  onClick()
  {
    this.tagInputs.forEach(tagInput => {
      if (!tagInput.isInputFocused() && tagInput.dropdown.isVisible) {
        tagInput.dropdown.hide();
      }
    })
  }

[jonathandsantiago]

@cesaric it worked here, thank you very much

[r-sw-eet]

Same Problem here, but the question on StackOverflow has an answer now, which worked for my purposes, just add

<tag-input-dropdown
...
[keepOpen]="false">
</tag-input-dropdown>

---

Edit: not all usecases are solved by this