ngx-chips not showing item list as autocomplete values Angular 5

Question

I'm using ngx-chips to add a functionality of search and tags at the same time. I'm having a hard time making the dropdown to work.

Here's a snippet of my tag

<div class="form-group" *ngIf="userList.length > 0">
      <label>Users: </label>
      {{userList | json}}
      <tag-input [ngModel]="selectedUsers" 
      secondaryPlaceholder="Searchusers"
      placeholder="Users" 
      [onlyFromAutocomplete]="true">
          <tag-input-dropdown  [autocompleteItems]="userList" [showDropdownIfEmpty]="true">
          </tag-input-dropdown>
        </tag-input>
    </div>

I'm displaying the userList json to verify that it has values.

Then in my component, I populate the userList like this:

userList: any = [];
selectedUsers: Array<any> = [];

getCommunicableUsers(){
this._usersService.getCommunicableUsers().subscribe(res =>{
  this.userList = res.map(function(user) {
    let ob = {  value: user.Id, display: user.Name };
    return ob;
  });
  console.log(this.userList);
})
}

I also tried using identifyBy and displayBy and remove the formatting on my userList and still no luck.

Not sure what I am missing been trying to search and fix this for 1 day now. Hope anyone could help. Thank you!

Answer 1

Search in style file i seen a property zIndex.

i used:

<tag-input-dropdown [showDropdownIfEmpty]="true" [autocompleteItems]="items" zIndex="10000">