Merge pull request #14631 from kigreg/DropdownPlaceholderNotDisplayed

Fix Dropdown: dynamic text in placeholder is not displayed fixes #14320
primefaces · Feb 7, 2024 · a74cb16 · a74cb16
2 parents 93668db + 76d605e
commit a74cb16
Showing 1 changed file with 12 additions and 5 deletions.
diff --git 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<string | undefined> {
+        return this._placeholder.asReadonly();
+    }
+    _placeholder = signal<string | undefined>(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) {