Dropdown | Deprecate autoDisplayFirst property

[cetincakiroglu]

• autoDisplayFirst property will be removed in the future because of the maintenance time cost and model value collisions.

• Instead of the autoDisplayFirst, users can set the value by the model value as shown below.

// component.html
<p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Select a City"></p-dropdown>


// component.ts
    cities: City[];

    selectedCity: City | undefined;

    ngOnInit() {
        this.cities = [
            { name: 'New York', code: 'NY' },
            { name: 'Rome', code: 'RM' },
            { name: 'London', code: 'LDN' },
            { name: 'Istanbul', code: 'IST' },
            { name: 'Paris', code: 'PRS' }
        ];
        this.selectedCity = this.cities[0] // same output with the autoDisplayFirst property, therefore it's not needed.
    }

[alexnoise79]

it's a pity cause scenario like this cannot be used anymore, and they were very useful

<p-dropdown [options]="cities" ngModel optionLabel="name" (ngModelChange)="doThis($event)></p-dropdown>

[PeterHewat]

Documentation needs updating: https://primeng.org/dropdown#api.dropdown.props.autoDisplayFirst

[ArturJarosz]

Isn't ngModel deprecated as well here as well?

[AlbaSS18]

And if I don't want to select any value, what value should I set? Null or undefined?

[majkers]

It's a really bad change. What if we want to force user to select an item (so we don't want to select firs item) and option list is taken from service? We have to either spread it (option list) with empty|null value and label or use empty string as placeholder now...

[digitalcraftco]

What about async as options now? #14190 (comment)

[samwightt]

Unfortunately this broke our app on our Angular 17 upgrade and was quite annoying to hunt down :( Wish this hadn't been deprecated.

[Kolic822]

You can create a custom directive for p-dropdown that will auto display first. Please copy all the code, not just the code in the box. I don't know why it won't register everything as code...

import { AfterContentInit, Directive } from '@angular/core';
import { NgControl } from '@angular/forms';
import { Dropdown } from 'primeng/dropdown';

@directive({
selector: '[autoSelectFirst]',
standalone: true,
})
export class AutoSelectFirstDirective implements AfterContentInit {
constructor(
private control: NgControl,
private dropdown: Dropdown,
) {}

ngAfterContentInit(): void {
// Ensure the form control exists
const formControl = this.control.control;
if (!formControl) return;

// Auto-select the first option when options are available
const setFirstOption = () => {
  if (this.dropdown.options && this.dropdown.options.length > 0) {
    const firstValue = this.dropdown.options[0].key;
    formControl.patchValue(firstValue);
  }
};

// PrimeNG `p-dropdown` may load options asynchronously, so use `ngAfterViewInit` to wait for them
setFirstOption();

// Listen for option changes on the dropdown (using PrimeNG's update event)
this.dropdown.onShow.subscribe(setFirstOption);

}
}