Autocomplete Component - Cannot get Reactive Form with existing value work

[bernik1980]

I have the following autocomplete input:

<input cAutocomplete
       highlightOptionsOnSearch
       allowOnlyDefinedOptions
       showHints
       [loading]="isPersonsLoading"
       [options]="persons"
       [search]="{external: true, global: true}"
       [delay]="500"
       (inputChange)="personsLoad($event)"
       id="person"
       formControlName="person"
       [valid]="itemForm.controls['person'].touched ? itemForm.controls['person'].valid : undefined" />

persons is a lazy loaded list after (inputChange):

persons: AutocompleteOption[] = []`

 personsLoad(input: string) {
   if (!input) {
     return
   }

   this.isPersonsLoading = true

   let query = new PagedQuery()
   query.filter = input
   query.sort = { column: 'LastName' }

   this.http.get<PagedResult<Person>>('/api/persons', { params: query.toHttpParams() }).subscribe({
     next: (result) => {

       this.persons = result.results.map((person) => <AutocompleteOption>{ label: `${person.lastName}, ${person.firstName}`, value: person.id })
     }
   }).add(() => {
     this.isPersonsLoading = false
   })
 }

The form definition:

itemForm = new FormGroup({
  person: new FormControl('', Validators.required)
}

And the important part, setting the form value initally:

this.itemForm.get('person')!.setValue(`${this.item.person?.lastName}, ${this.item.person?.firstName}`)

And now whenever I change the autocomplete input, the list of options is not displayed, but the input resets immediatly to the inital value.

If no initial value is set, the input works as expected.

[bernik1980]

On further analysis, this not only happens with Reactive Forms, but also Template-driven. As long as a value is specified before changing the input for the first time, it always resets to the initial value.

[bernik1980]

Can you have a look at the following too?

The (optionChange) is called twice during initialization.

Always once with a -null- value.

And if a ngModel is assiged, a second time with that value.

As I understand it, (optionChange) should really only be called, if the user has selected an option from the list.