Autocomplete dropdown does not appear

[GauravNagpure]

[x] bug report

I am not able to see the autocomplete dropdown here.

<div class="form-group">
            <label class="label" for="teams">Channel</label>
            <tag-input id="teams" [onlyFromAutocomplete]="true" [placeholder]="'Add more'"
                [secondaryPlaceholder]="'Select team channels'" [ngModel]="data.channel_id">

                <tag-input-dropdown [autocompleteItems]="channelChoices">
                </tag-input-dropdown>
            </tag-input>
 </div>

channelChoices is nothing but string[]

I have: "@angular/animations": "^8.2.14", "@angular/cdk": "^8.2.3", "@angular/common": "^8.2.14", "@angular/compiler": "^8.2.14", "@angular/core": "^8.2.14", "@angular/forms": "^8.2.14", "@angular/material": "^8.2.3", "@angular/platform-browser": "^8.2.14", "@angular/platform-browser-dynamic": "^8.2.14", "ngx-chips": "^2.1.0"

[cascesme]

I have the same issue. I think it may be a problem with overflow:hidden or z-index idk. If you found a solution please let me know.

[cascesme]

Okay I just solve the issue. In my case I was trying to show it in a modal window. The problem is that the ng2-dropdown is being created out of the element right next to the body. It creates one of these elements for each tag-input-dropdown you create. The thing is that by default it has z-index: 1000, this number seems really random to me because bootstrap 4 uses z-index: 1025 for the modal windows. So it makes this menu almost unusable in modals. To fix-patch this I added a global css rule that changes the ng2-dropdown-menu to a z-index: 2000 and it works. I ask the author to consider increasing the z-index based on this.

[relliv]

Thanks for the hint.

.ng2-dropdown-menu {
  z-index: 2000 !important;
}