Value can not be changed programatically after it has been changed from the ui once

[troehling]

Describe the bug
There are two possibilities how the value displayed in the ng-select can change:
a. It is changed by the user in the by interacting with the web browser. The change in the application is triggered from within the ng-select in this case.
b. It is changed from the outside without any direct user interaction with the ng-select component. The change is coming from outside of the ng-select component.

The issue I came across is now that after the user has changed the value of the ng-select once (option a. above), changing the value from "outside" (option b. above) does not work completely anymore. As far as I can tell only the value of the <input> element is not adjusted/the change detection is not running for this element as expected. If you click the <input> element once afterward, it seems like change detection runs again and displays the correct value. Also the dropdown highlights the correct value directly.

Reproducible example
Minimal example here: https://github.com/troehling/ng-select-issue
Stackblitz with a few more options I tested (I hope this is still available): stackblitz

To Reproduce
Steps to reproduce the behavior (if example is not provided):

1. Click the "Change Value" button (the value in the ng-select above will change to a random value, the random values are printed to the console to check if the match)
2. Select a value in the ng-select manually (Its also sufficient to open the dropdown and close it without selecting a value)
3. Click the "Change Value" button again: Now the ng-select does not display the value changed value
4. (optional) Click on the <input> element which is part of ng-select (the part which displays the value): Now the value that is displayed is updated with the correct value

Expected behavior
The value that is displayed by the ng-select is expected to change on changes performed by the user as well as changes executed programatically no matter how the value has been changed before

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOS
• Browser chrome
• Version 117.0.5938.88

Additional context
A possible workaround I identified is calling this.ngSelect.handleClearClick() before changing the value. I included this as a commented line in the examples. The workaround is not a good option as it clears the ng-select completely if the same value is set twice from the outside (press the button until that happenes by chance to the this effect).

I am not sure if the following is helpful at all but I believe the origin of problem could be _setSearchTermFromItems not being called in the case I described. But thus far I could not figure out why thats the case.

[troehling]

I found a workaround for my situation by removing editableSearchTerm and using the default of false for it, I was able to get around the issue.

I believe this can still be an issue when someone relies on editableSearchTerm.

[aparzi]

Hi @troehling,
I added this changes at your code and this fix when the same value is selected.

onClick(): void {
    const change = getRandomInt(4) + 1;
    if (change != this.model) {
      this.ngSelect.handleClearClick(); // Potential workaround with some issues (see issue in github)
      this.model = change;
      console.log(`Changing value to ${this.model}`);
      this.cdRef.markForCheck();
    }
  }

[aparzi]

Hi @varnastadeus it is possible fix this problem?
However, I'm trying to work to do it myself