Dropdown | autoDisplayFirst not update value of dropdown

[marcioggs]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)

app.component.html:

<p-dropdown
  [options]="countries"
  [(ngModel)]="selectedCountry.code"
  optionValue="code"
  optionLabel="name"
  [showClear]="true"
>
  <ng-template pTemplate="selectedItem">
    <div class="country-item country-item-value" *ngIf="selectedCountry">
      <div>{{ selectedCountry.name }} {{ selectedCountry.code }}</div>
    </div>
  </ng-template>
  <ng-template let-country pTemplate="item">
    <div class="country-item">
      <div>{{ country.name }}</div>
    </div>
  </ng-template>
</p-dropdown>

app.component.ts

...
  countries: any[];
  selectedCountry = { name: null, code: null };

  constructor() {
    super();
    this.countries = [
      { name: 'Australia', code: 'AU' },
      { name: 'Brazil', code: 'BR' },
      { name: 'China', code: 'CN' },
      { name: 'Egypt', code: 'EG' },
      { name: 'France', code: 'FR' },
      { name: 'Germany', code: 'DE' },
      { name: 'India', code: 'IN' },
      { name: 'Japan', code: 'JP' },
      { name: 'Spain', code: 'ES' },
      { name: 'United States', code: 'US' },
    ];
  }
...

PS I couldn't create the StackBlitz because some errors occurs on the console and the application keeps stuck loading forever with the initial template:
https://stackblitz.com/github/primefaces/primeng-issue-template

Current behavior
The first option is not selected after clicking on it.
This only happens when there's no placeholder attribute present.
Options other than the first one can be selected without problems.

Expected behavior
First option should be selected after clicking on it.

Minimal reproduction of the problem with instructions
Open the page and click on the first option of the dropdown.

Please tell us about your environment:
Operating syste: Windows 10
IDE: IntelliJ
HTTP server: Angular live server

• Angular version: 12.2.11

• PrimeNG version: 12.2.1

• Browser: *
  Microsoft Edge Version 90.0.818.41 (Official build) (64-bit)
  Google Chrome Version 72.0.3626.81 (Official Build) (64-bit)

• Language: TypeScript 4.3.2

• Node (for AoT issues): node --version = v14.15.4

[yigitfindikli]

Hi @marcioggs,

Thanks a lot for your report. The main problem is autoDisplayFirst doesn't update the value of the dropdown. And it's fixed in v12.2.2(Thanks to your investigation). But I think your approach does not want the autoDisplayFirst strategy. If you do not want the automatic first item selection then you can use [autoDisplayFirst]="false".

[marcioggs]

Hello @yigitfindikli ,

thanks for the quick support and for letting me know about autoDisplayFirst!
Indeed this fixed for me on 12.2.1 :)