Autocomplete Component - Cannot clear Template-driven value

[bernik1980]

I have a simple autocomlete input:

 <input id="..."
        [(ngModel)]="value"
        cAutocomplete
        ...

The value is a simple signal:
value = signal('')

After doing an external search following (inputChange) and reacting on (optionChange) with another http request, I want to clear the current displayed value of the input:

value.set('')

But the value of the last selected option remains displayed.

A cleaner does work, but I want to clear the value programmatically.

[xidedix]

@bernik1980
fixed in ~5.6.23

[bernik1980]

@xidedix
I was not able to test the fix, because another bug (#235) was re-introduced with 5.6.23, which did force me to go back to 5.6.22:

When using the autocomplete component with reactive forms and assigning a value to the related form group control, the (optionChange) callback will be called without a value. This was then, and is now, a show-stopper. Could you please look into this again?

[xidedix]

@bernik1980
We're having trouble confirming your (optionChange) callback issue.
Could you please take a look at this example? (see console log)
https://coreui.io/angular/docs/forms/autocomplete/#implementation-example

[bernik1980]

@xidedix
I took a look at your new example. And on further testing, the mentioned bug only happens, if the formControl is empty before assigning a value. This should really be the default case. since you wont assign a static value to the control in a production environment.

Works fine:

protected formGroup = new FormGroup({
    userName: new FormControl<string>('Barbara')
  });

this.formGroup.get('userName')?.setValue('Markus');

Unwanted (optionChange) callback occurs:

protected formGroup = new FormGroup({
    userName: new FormControl<string>('')
  });

this.formGroup.get('userName')?.setValue('Markus');

Note: I did not test the specified example, which I took from your documentation. But I confirmed this in my own environment, which works nearly the same. So I hope, you can reproduce this issue.

[bernik1980]

I can confirm the value.set('') fix though. Thank you for that!

I will close this issue, as soon as we worked out the (optionChange).

[xidedix]

@bernik1980
please find https://stackblitz.com/edit/5q9hfjuh?file=src%2Fapp%2Fautocomplete16.component.ts with

protected formGroup = new FormGroup({
  userName: new FormControl<string>(''),
});

where (optionChange) does not fire

[bernik1980]

@xidedix
I tried my best to reproduce this issue in your example, but was not able to achieve that.

What I can say is, that this does not happen with 5.6.22 but with 5.6.24. (Most likely with 5.6.23 too, but i only testet 5.6.24 recently.) So the fix for the main topic of this issue seems responsible.

Another finding ist, that (optionChange) is only called after [delay] has been passed after assigning a value to the FormControl. So if I increase that value to 2500, I can see my assigned value for 2500ms until (optionChanged) is called without a value.

Additionally I have to say, that my project uses some newer library then stackblitz and that it is zoneless. But thats just poking in the dark.

Do you have any idea left, what could be the reason?

[xidedix]

@bernik1980 we'll keep digging

[bernik1980]

I digged a little bit myself and can now reproduce the issue. Since I have no account on Stackblitz, I will describe my changes here.

The issue will happen in combination with a http request started in ngOnInit. Starting the http request on a button click will not yield the error, it has to be in the ngOnInit function.

So here is how to extend your example:
(If you need the imports too, let me know.)

• Extend the constructor:
  constructor(private http: HttpClient) {

• Let the class implement OnInit:
  export class Autocomplete16Component implements OnInit {

• Implement ngOnInit:
  ngOnInit() { this.http.get('https://apitest.coreui.io/demos/users').subscribe({ next: () => { this.formGroup.get('userName')?.setValue('Markus') } }) }

Wait for the container to reload. You now will see 'Markus' displayed for 1500ms (delay of the Autocomplete) and then its cleared.

If there is something wrong with my basic approch, I would really like to know. I start API requests in ngOnInit very often, to load data for the component.

@xidedix And just to be sure: This does not happen, if the FormControl has an inial value other then ''

Thank you for all the time you investing in this!

[xidedix]

Thanks for the details. We were able to reproduce your issue.

[xidedix]

@bernik1980 we’ve identified the problem and are working on the patch.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions

[bernik1980]

Any news on this? I had to implement a workarround using "loading" as initial formcontrol value, to avoid the reset.