compareWith not triggered when list of items is updated

Describe the bug We used to have an ng-select like this:

<ng-select [items]="items" groupBy="group" bindLabel="value" formControlName="item"></ng-select>

The list of items looked like this: [{code: 'A', value: 'description', group: 'some group'}]. The list was provided by a parent component and was async so you could start with an empty list. When the model already had a selected item when you opened the page it could take a small amount of time until the items were finally loaded before it would show the selected item in the input field. This behaved as expected.

We recently changed this to:

<ng-select [items]="items" groupBy="group" bindLabel="description" bindValue="item" [compareWith]="isMatch" formControlName="item"></ng-select>

The list of items looks like this now: [{description: 'alternate description', item: {code: 'A', value: 'description'}, group: 'some group'}].

isMatch looks like:

isMatch(toCompare, selected) { return toCompare.code === selected.code; }

When the model already has a selected item and the data is already available or fast enough there are no issues. But when the list of items is empty at first and then gets updated very quickly afterwards the ng-select input stays empty, even though the selected item is in the list. I checked to see if compareWith was called at all when the items were updated. It wasn’t. The items list is a new array, not a modified one. The items are shown in the dropdown, it’s just that the item that’s selected is not shown in the input field.

Reproducible example Not available

To Reproduce Have an ng-select with bindValue and compareWith where bindValue is a nested object inside an item. Start with a selected item in the model. Items should be an empty list to start with, then update with a list with all the items, including one that contains the selected item. The input field stays empty, most likely because compareWith isn’t executed to check if the selected item matches an item in the new list.

Expected behavior I’d expect the selected item to be shown in the input when the empty items list is replaced with the loaded items.

Desktop (please complete the following information):

• OS: Arch Linux
• Browser chrome 81.0.4044.92
• ng-select version 4

[lbsn]

Please reopen this issue. I have a very similar (if not the exact same) use case. Here a reproducible example: not-working-compare-with

From what I can understand, the problem seems to be that writeValue() on NgSelectComponen doesn’t get called when items change and on the first call items is still empty.

[davidecampello]

I’m having the same issue!