Fixed #13996 - Refactor label method & update documentation

primefaces · Nov 3, 2023 · afe38e2 · afe38e2
1 parent 3b6ff1f
commit afe38e2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 15 deletions.
diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts
@@ -146,9 +146,11 @@ export class DropdownItem {
                 (blur)="onInputBlur($event)"
                 (keydown)="onKeyDown($event)"
             >
-                <ng-container *ngIf="!selectedItemTemplate">{{ label() === 'p-emptylabel' ? '&nbsp;' : label() || 'empty' }}</ng-container>
+                <ng-container *ngIf="!selectedItemTemplate; else defaultPlaceholder">{{ label() === 'p-emptylabel' ? '&nbsp;' : label() || 'empty' }}</ng-container>
                 <ng-container *ngTemplateOutlet="selectedItemTemplate; context: { $implicit: modelValue() }"></ng-container>
-                <span *ngIf="!editable && !label() && placeholder">{{ placeholder || 'empty' }}</span>
+                <ng-template #defaultPlaceholder>
+                    <span *ngIf="label() === placeholder || label() && !placeholder">{{ label() === 'p-emptylabel' ? '&nbsp;' : placeholder}}</span>
+                </ng-template>
             </span>
             <input
                 *ngIf="editable"
@@ -898,14 +900,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
 
     label = computed(() => {
         let selectedOptionIndex;
-
-        if (this.autoDisplayFirst) {
-            selectedOptionIndex = this.findFirstOptionIndex();
-        }
-        if (!this.autoDisplayFirst) {
-            selectedOptionIndex = this.findSelectedOptionIndex();
-        }
-
+        this.autoDisplayFirst ? !this.modelValue() ? (selectedOptionIndex = -1) : (selectedOptionIndex = this.findFirstOptionIndex()) : (selectedOptionIndex = this.findSelectedOptionIndex());
         return this.modelValue() ? this.getOptionLabel(this.modelValue()) : selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions()[selectedOptionIndex]) : this.placeholder || 'p-emptylabel';
     });
 
@@ -1049,6 +1044,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
 
     updateModel(value, event?) {
         this.onModelChange(value);
+        this.value = value;
         this.modelValue.set(value);
         this.selectedOptionUpdated = true;
         this.onChange.emit({
@@ -1116,7 +1112,6 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
         if (this.filter) {
             this.resetFilter();
         }
-
         this.value = this.modelValue();
         this.updateModel(this.value);
         this.updateEditableLabel();
@@ -1691,7 +1686,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     }
 
     clear(event: Event) {
-        this.updateModel(event, null);
+        this.updateModel(null, event);
         this.updateEditableLabel();
         this.onClear.emit(event);
     }

diff --git a/src/app/showcase/doc/dropdown/basicdoc.ts b/src/app/showcase/doc/dropdown/basicdoc.ts
@@ -17,7 +17,7 @@ interface City {
             </p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" showClear="true"></p-dropdown>
+            <p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" showClear="true" placeholder="Select a City"></p-dropdown>
         </div>
         <app-code [code]="code" selector="dropdown-basic-demo"></app-code>
     </section>`
@@ -43,11 +43,11 @@ export class BasicDoc implements OnInit {
 
     code: Code = {
         basic: `
-<p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name"></p-dropdown>`,
+<p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" showClear="true" placeholder="Select a City"></p-dropdown>`,
 
         html: `
 <div class="card flex justify-content-center">
-    <p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name"></p-dropdown>
+    <p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" showClear="true" placeholder="Select a City"></p-dropdown>
 </div>`,
 
         typescript: `