primeng 16.7.0 → 16.7.1

package/fesm2022/primeng-dropdown.mjs

@@ -16,7 +16,7 @@ import * as i6 from 'primeng/scroller';
 import { ScrollerModule } from 'primeng/scroller';
 import * as i5 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import { UniqueComponentId, ObjectUtils } from 'primeng/utils';
+import { ObjectUtils, UniqueComponentId } from 'primeng/utils';
 import { TimesIcon } from 'primeng/icons/times';
 import { ChevronDownIcon } from 'primeng/icons/chevrondown';
 import { SearchIcon } from 'primeng/icons/search';
@@ -609,7 +609,7 @@ class Dropdown {
         return this.modelValue() || this.modelValue() != null || this.modelValue() != undefined;
     }
     get isVisibleClearIcon() {
-        return this.modelValue() != null && this.modelValue() !== '' && this.showClear && !this.disabled;
+        return this.modelValue() != null && ObjectUtils.isNotEmpty(this.modelValue()) && this.modelValue() !== '' && this.showClear && !this.disabled;
     }
     get containerClass() {
         return {
@@ -622,10 +622,11 @@ class Dropdown {
         };
     }
     get inputClass() {
+        const label = this.label();
         return {
             'p-dropdown-label p-inputtext': true,
-            'p-placeholder': this.placeholder && this.label() === this.placeholder,
-            'p-dropdown-label-empty': !this.editable && !this.selectedItemTemplate && (this.label() === 'p-emptylabel' || this.label().length === 0)
+            'p-placeholder': this.placeholder && label === this.placeholder,
+            'p-dropdown-label-empty': !this.editable && !this.selectedItemTemplate && (!label || label === 'p-emptylabel' || label.length === 0)
         };
     }
     get panelClass() {
@@ -638,7 +639,9 @@ class Dropdown {
     visibleOptions = computed(() => {
         const options = this.group ? this.flatOptions(this.options) : this.options || [];
         if (this._filterValue()) {
-            const filteredOptions = this.filterService.filter(options, this.searchFields(), this._filterValue(), this.filterMatchMode, this.filterLocale);
+            const filteredOptions = !this.filterBy && !this.filterFields && !this.optionValue
+                ? this.options.filter((option) => option.toLowerCase().indexOf(this._filterValue().toLowerCase()) !== -1)
+                : this.filterService.filter(options, this.searchFields(), this._filterValue(), this.filterMatchMode, this.filterLocale);
             if (this.group) {
                 const optionGroups = this.options || [];
                 const filtered = [];
@@ -656,12 +659,7 @@ class Dropdown {
     });
     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';
     });
     constructor(el, renderer, cd, zone, filterService, config) {
@@ -782,13 +780,16 @@ class Dropdown {
         }
     }
     updateModel(value, event) {
+        this.value = value;
         this.onModelChange(value);
+        if (this.value !== this.modelValue()) {
+            this.onChange.emit({
+                originalEvent: event,
+                value: value
+            });
+        }
         this.modelValue.set(value);
         this.selectedOptionUpdated = true;
-        this.onChange.emit({
-            originalEvent: event,
-            value: value
-        });
     }
     isSelected(option) {
         return this.isValidOption(option) && ObjectUtils.equals(this.modelValue(), this.getOptionValue(option), this.equalityKey());
@@ -836,7 +837,7 @@ class Dropdown {
         if (this.filter) {
             this.resetFilter();
         }
-        this.value = this.modelValue();
+        this.value = value;
         this.updateModel(this.value);
         this.updateEditableLabel();
         this.cd.markForCheck();
@@ -1308,7 +1309,7 @@ class Dropdown {
         this.applyFocus();
     }
     clear(event) {
-        this.updateModel(event, null);
+        this.updateModel(null, event);
         this.updateEditableLabel();
         this.onClear.emit(event);
     }
@@ -1339,9 +1340,11 @@ class Dropdown {
                 (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"
@@ -1528,9 +1531,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 (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"