@ng-select/ng-select No mouse click event on option click-CodePudding

I'm trying to add a filter to a filters popup built in bootstrap modal (ngx-bootstrap), but I face the following issue: My options array looks like

[
   {
      "name":"All",
      "value":""
   },
   {
      "name":"Foo",
      "value":"foo"
   },
   {
      "name":"Bar",
      "value":"bar"
   },
]

template:

    <ng-select
      (change)="updateFilter($event)"
      [(ngModel)]="value">
      <ng-option *ngFor="let option of options"
                 [value]="option.value">
        <div title="{{option.name}}">{{option.name}}</div>
      </ng-option>
    </ng-select>

@ng-select/ng-select v.7

When the popup is rendered and select options are shown up I can't select an option on mouse click. I can select an option using my arrow keys and pressing Enter, I can hover over the elements and they are highlighted. But when I click, it does nothing, no events, no js errors in console, nothing.

I can only guess that something else is interfering with the click event on my page, but I don't know how to find it.

Note: I have tried adding appendTo="body" - no luck

UPD: the simple trackBy solved my issue.

CodePudding user response：

The solution was simple: How to use `trackBy` with `ngFor` I added the trackBy function that preserves the value of the ng-select element:

    <ng-select
      (change)="updateFilter($event)"
      [(ngModel)]="value">
      <ng-option *ngFor="let option of options; trackBy:identify"
                 [value]="option.value">
        <div title="{{option.name}}">{{option.name}}</div>
      </ng-option>
    </ng-select>

  identify(index, item){
     return item.name; 
  }