Autocomplete Clear Icon not shown if value set programatically

[gianluca-moro]

Describe the bug

When setting the value of a p-autocomplete with [showClear]="true" programatically in the Typescript class, the clear icon is not shown even though the value is present. Only when clicking into the Autocomplete, the clear icon is shown and stays shown when leaving the input again.

Environment

• Primeng v17.18.9
• Angular v18.2.3

Reproducer

https://stackblitz.com/edit/s5gxpn?file=src%2Fapp%2Fautocomplete-dropdown-demo.ts

Angular version

18.2.3

PrimeNG version

17.18.9

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.19.1

Browser(s)

Chrome, Firefox

Steps to reproduce the behavior

1. Run the Stackblitz application https://stackblitz.com/edit/s5gxpn?file=src%2Fapp%2Fautocomplete-dropdown-demo.ts
2. Voila, the autocomplete has a value present but no clear icon even though [showClear]="true" is set

<p-autoComplete
    formControlName="country"
    [dropdown]="true"
    [suggestions]="filteredCountries"
    (completeMethod)="filterCountry($event)"
    field="name"
    [showClear]="true"
  />

ngOnInit() {
    this.countryService.getCountries().then((countries) => {
      this.countries = countries;
    });
    this.formGroup = this.formBuilder.group({
      country: [{ name: 'Afghanistan', code: 'AF' }],
    });
  }

Expected behavior

The clear button should be visible whenever a value is present, even if the value is set programatically in the typescript class.

[gianluca-moro]

And please don't tell me this is intended behaviour because now the user has to first click into the input and then hit the clear button instead of only needing a single click on the clear button.