diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index 2db60c6befa..ec1797357be 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -20,6 +20,7 @@ import { Output, QueryList, Renderer2, + Signal, signal, SimpleChanges, TemplateRef, @@ -403,7 +404,13 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV * Default text to display when no option is selected. * @group Props */ - @Input() placeholder: string | undefined; + @Input() set placeholder(val: string | undefined) { + this._placeholder.set(val); + } + get placeholder(): Signal { + return this._placeholder.asReadonly(); + } + _placeholder = signal(undefined); /** * Placeholder text to show when filter input is empty. * @group Props @@ -883,7 +890,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV const label = this.label(); return { 'p-dropdown-label p-inputtext': true, - 'p-placeholder': this.placeholder && label === this.placeholder, + 'p-placeholder': this.placeholder() && label === this.placeholder(), 'p-dropdown-label-empty': !this.editable && !this.selectedItemTemplate && (!label || label === 'p-emptylabel' || label.length === 0) }; } @@ -935,10 +942,10 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV // because of timining issues with virtual scroll lazy load PrimeNG demo, keep original logic for virtual scroll if (this.virtualScroll) { const selectedOptionIndex = this.findSelectedOptionIndex(); - return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions()[selectedOptionIndex]) : this.placeholder || 'p-emptylabel'; + return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions()[selectedOptionIndex]) : this.placeholder() || 'p-emptylabel'; } const modelValue = this.modelValue(); - return modelValue !== undefined && modelValue !== null ? this.getOptionLabel(this.selectedOption) : this.placeholder || 'p-emptylabel'; + return modelValue !== undefined && modelValue !== null ? this.getOptionLabel(this.selectedOption) : this.placeholder() || 'p-emptylabel'; }); selectedOption: any; @@ -1113,7 +1120,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV } allowModelChange() { - return this.autoDisplayFirst && !this.placeholder && (this.modelValue() === undefined || this.modelValue() === null) && !this.editable && this.options && this.options.length; + return this.autoDisplayFirst && !this.placeholder() && (this.modelValue() === undefined || this.modelValue() === null) && !this.editable && this.options && this.options.length; } isSelected(option) {