Merge branch 'master' into DropdownPlaceholderNotDisplayed

CHANGELOG.md

@@ -1,4 +1,28 @@
 # Changelog
+## [17.5.0](https://github.com/primefaces/primeng/tree/17.5.0) (2024-02-01)
+
+[Full Changelog](https://github.com/primefaces/primeng/compare/17.4.0...17.5.0)
+
+**Implemented New Features and Enhancements:**
+- AutoComplete | Description in the accessibility section for tab not working [\#14641](https://github.com/primefaces/primeng/issues/14641)
+
+**Fixed bugs:**
+- Component: InputNumber does not validate max on blur [\#14630](https://github.com/primefaces/primeng/issues/14630)
+- p-dropdown: Filtering all items incorrectly clears the dropdown's selected value [\#14596](https://github.com/primefaces/primeng/issues/14596)
+- Component: Dropdown [\#14367](https://github.com/primefaces/primeng/issues/14367)
+- paginator missing p-paginator-top/bottom class [\#14679](https://github.com/primefaces/primeng/issues/14679)
+- Component: Placeholder not working in dropdown Reactive Forms and Template [\#14679](https://github.com/primefaces/primeng/issues/14679)
+- TabView with scrollable throws an exception [\#13332](https://github.com/primefaces/primeng/issues/13332)
+- Component: TreeTable, dragging over table cells [\#14512](https://github.com/primefaces/primeng/issues/14512)
+- p-calendar: validation is triggered before calendar is even touched [\#14542](https://github.com/primefaces/primeng/issues/14542)
+- Referencing closed thread -> Responsive Stack and add [scrollable]="true" not working responsive stack #11331 [\#14667](https://github.com/primefaces/primeng/issues/14667)
+- Table: built-in Ctrl+A errors when "rows" parameter is defined [\#14634](https://github.com/primefaces/primeng/issues/14634)
+- p-autocomplete: maxlength doesn't work anymore [\#14595](https://github.com/primefaces/primeng/issues/14595)
+- Dropdown: autoOptionFocus property not working [\#14655](https://github.com/primefaces/primeng/issues/14655)
+- Dropdown: Unable to type in editable Dropdowns when filtering options onChange and current value is an option [\#14556](https://github.com/primefaces/primeng/issues/14556)
+- p-MultiSelect: Clear Button does not work [\#14585](https://github.com/primefaces/primeng/issues/14585)
+- Calendar: Calendar CSS breaks other Components [\#14606](https://github.com/primefaces/primeng/issues/14606)
+
 ## [17.4.0](https://github.com/primefaces/primeng/tree/17.4.0) (2024-01-24)
 
 [Full Changelog](https://github.com/primefaces/primeng/compare/17.3.3...17.4.0)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "primeng",
-    "version": "17.4.0",
+    "version": "17.5.0",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {
         "ng": "ng",
@@ -22,6 +22,7 @@
         "type": "git",
         "url": "https://github.com/primefaces/primeng.git"
     },
+    "type": "module",
     "devDependencies": {
         "@angular-devkit/build-angular": "^17.0.5",
         "@angular-eslint/eslint-plugin": "17.1.1",

src/app/components/accordion/accordion.ts

@@ -308,7 +308,7 @@ export class AccordionTab implements AfterContentInit, OnDestroy {
             case 'Enter':
             case 'Space':
                 this.toggle(event);
-                event.preventDefault(); // ???
+                event.preventDefault();
                 break;
             default:
                 break;

src/app/components/api/translationkeys.ts

@@ -41,7 +41,7 @@ export class TranslationKeys {
     public static readonly PASSWORD_PROMPT = 'passwordPrompt';
     public static readonly EMPTY_MESSAGE = 'emptyMessage';
     public static readonly EMPTY_FILTER_MESSAGE = 'emptyFilterMessage';
-    public static readonly SHOW_FILTER_MENU = 'Show Filter Menu';
-    public static readonly HIDE_FILTER_MENU = 'Hide Filter Menu';
+    public static readonly SHOW_FILTER_MENU = 'showFilterMenu';
+    public static readonly HIDE_FILTER_MENU = 'hideFilterMenu';
     public static readonly SELECTION_MESSAGE = '{0} items selected';
 }

src/app/components/autocomplete/autocomplete.ts

@@ -583,7 +583,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
      * Whether to focus on the first visible or selected element when the overlay panel is shown.
      * @group Props
      */
-    @Input() autoOptionFocus: boolean | undefined = true;
+    @Input() autoOptionFocus: boolean | undefined = false;
     /**
      * When enabled, the focused option is selected.
      * @group Props
@@ -1061,7 +1061,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
             clearTimeout(this.searchTimeout);
         }
 
-        let query = event.target.value;
+        let query = event.target.value.split('').slice(0, this.maxlength).join('');
 
         if (!this.multiple && !this.forceSelection) {
             this.updateModel(query);

src/app/components/calendar/calendar.css

@@ -166,7 +166,7 @@
         cursor: pointer;
     }
 
-    .p-icon-wrapper {
+    .p-datepicker-icon {
         pointer-events: none;
     }
 

src/app/components/calendar/calendar.ts

@@ -120,7 +120,13 @@ export const CALENDAR_VALUE_ACCESSOR: any = {
                     </ng-container>
                 </button>
                 <ng-container *ngIf="iconDisplay === 'input' && showIcon">
-                    <CalendarIcon *ngIf="!inputIconTemplate" (click)="onButtonClick($event)" />
+                    <CalendarIcon
+                        (click)="onButtonClick($event)"
+                        *ngIf="!inputIconTemplate"
+                        [ngClass]="{
+                            'p-datepicker-icon': showOnFocus
+                        }"
+                    />
                     <ng-container *ngTemplateOutlet="inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }"></ng-container>
                 </ng-container>
             </ng-template>
@@ -1575,6 +1581,8 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
                     formattedValue += ' ' + this.formatTime(date);
                 }
             }
+        } else if (this.dataType === 'string') {
+            formattedValue = date;
         }
 
         return formattedValue;

src/app/components/checkbox/checkbox.ts

@@ -293,7 +293,9 @@ export class Checkbox implements ControlValueAccessor {
     }
 
     setDisabledState(val: boolean): void {
-        this.disabled = val;
+        setTimeout(() => {
+            this.disabled = val;
+        });
         this.cd.markForCheck();
     }
 

src/app/components/dragdrop/dragdrop.ts

@@ -251,8 +251,10 @@ export class Droppable implements AfterViewInit, OnDestroy {
     dragLeave(event: DragEvent) {
         event.preventDefault();
 
-        DomHandler.removeClass(this.el.nativeElement, 'p-draggable-enter');
-        this.onDragLeave.emit(event);
+        if (!this.el.nativeElement.contains(event.relatedTarget)) {
+            DomHandler.removeClass(this.el.nativeElement, 'p-draggable-enter');
+            this.onDragLeave.emit(event);
+        }
     }
 
     allowDrop(event: DragEvent): boolean {

src/app/components/dropdown/dropdown.ts

@@ -150,9 +150,9 @@ export class DropdownItem {
                 [attr.required]="required"
             >
                 <ng-container *ngIf="!selectedItemTemplate; else defaultPlaceholder">{{ label() === 'p-emptylabel' ? '&nbsp;' : label() }}</ng-container>
-                <ng-container *ngTemplateOutlet="selectedItemTemplate; context: { $implicit: selectedOption }"></ng-container>
+                <ng-container *ngIf="selectedItemTemplate && selectedOption" [ngTemplateOutlet]="selectedItemTemplate" [ngTemplateOutletContext]="{ $implicit: selectedOption }"></ng-container>
                 <ng-template #defaultPlaceholder>
-                    <span *ngIf="(modelValue() === undefined || modelValue === null) && (label() === placeholder || (label() && !placeholder))">{{ label() === 'p-emptylabel' ? '&nbsp;' : placeholder }}</span>
+                    <span *ngIf="(modelValue() === undefined || modelValue() === null) && (label() === placeholder || (label() && !placeholder))">{{ label() === 'p-emptylabel' ? '&nbsp;' : placeholder }}</span>
                 </ng-template>
             </span>
             <input
@@ -855,6 +855,8 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
 
     listId: Nullable<string>;
 
+    clicked = signal<boolean>(false);
+
     get emptyMessageLabel(): string {
         return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
     }
@@ -866,7 +868,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     get filled(): boolean {
         if (typeof this.modelValue() === 'string') return !!this.modelValue();
 
-        return this.modelValue() || this.modelValue() != null || this.modelValue() != undefined;
+        return this.modelValue() || this.modelValue() !== null || this.modelValue() !== undefined;
     }
 
     get isVisibleClearIcon(): boolean | undefined {
@@ -908,9 +910,15 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
             const _filterBy = this.filterBy || this.optionLabel;
 
             const filteredOptions =
-                !_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);
+            !_filterBy && !this.filterFields && !this.optionValue
+                ? this.options.filter((option) => {
+                      if (option.label) {
+                          return option.label.toLowerCase().indexOf(this._filterValue().toLowerCase()) !== -1;
+                      }
+                      return 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 = [];
@@ -931,8 +939,13 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     });
 
     label = computed(() => {
-        const selectedOptionIndex = this.findSelectedOptionIndex();
-        return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions()[selectedOptionIndex]) : this.placeholder() || 'p-emptylabel';
+        // 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';
+        }
+        const modelValue = this.modelValue();
+        return modelValue !== undefined && modelValue !== null ? this.getOptionLabel(this.selectedOption) : this.placeholder() || 'p-emptylabel';
     });
 
     selectedOption: any;
@@ -945,8 +958,11 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
             const visibleOptions = this.visibleOptions();
 
             if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions)) {
-                this.selectedOption = visibleOptions[this.findSelectedOptionIndex()];
-                this.cd.markForCheck();
+                const selectedOptionIndex = this.findSelectedOptionIndex();
+                if (selectedOptionIndex !== -1 || modelValue === undefined || modelValue === null || this.editable) {
+                    this.selectedOption = visibleOptions[selectedOptionIndex];
+                    this.cd.markForCheck();
+                }
             }
 
             if (modelValue !== undefined && this.editable) {
@@ -1064,7 +1080,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
             this.focusedOptionIndex.set(this.findFirstFocusedOptionIndex());
             this.onOptionSelect(null, this.visibleOptions()[this.focusedOptionIndex()], false);
         }
-        if (this.autoDisplayFirst && !this.modelValue()) {
+        if (this.autoDisplayFirst && (this.modelValue() === null || this.modelValue() === undefined)) {
             const ind = this.findFirstOptionIndex();
             this.onOptionSelect(null, this.visibleOptions()[ind], false, true);
         }
@@ -1104,7 +1120,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     }
 
     allowModelChange() {
-        return this.autoDisplayFirst && !this.placeholder() && !this.modelValue() && !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) {
@@ -1206,6 +1222,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
             this.overlayVisible ? this.hide(true) : this.show(true);
         }
         this.onClick.emit(event);
+        this.clicked.set(true);
         this.cd.detectChanges();
     }
 
@@ -1221,7 +1238,9 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
 
         this.onModelChange(value);
         this.updateModel(value, event);
-        this.onChange.emit({ originalEvent: event, value: value });
+        setTimeout(() => {
+            this.onChange.emit({ originalEvent: event, value: value });
+        }, 1);
 
         !this.overlayVisible && ObjectUtils.isNotEmpty(value) && this.show();
     }
@@ -1231,7 +1250,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
      */
     public show(isFocus?) {
         this.overlayVisible = true;
-        const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
+        const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.editable ? -1 : this.findSelectedOptionIndex();
         this.focusedOptionIndex.set(focusedOptionIndex);
 
         if (isFocus) {
@@ -1284,6 +1303,8 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     public hide(isFocus?) {
         this.overlayVisible = false;
         this.focusedOptionIndex.set(-1);
+        this.clicked.set(false);
+        this.searchValue = '';
 
         if (this.filter && this.resetFilterOnHide) {
             this.resetFilter();
@@ -1401,6 +1422,8 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
 
                 break;
         }
+
+        this.clicked.set(false);
     }
 
     onFilterKeyDown(event) {
@@ -1448,10 +1471,18 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     }
 
     onArrowDownKey(event: KeyboardEvent) {
-        const optionIndex = this.focusedOptionIndex() !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex()) : this.findFirstFocusedOptionIndex();
-        this.changeFocusedOptionIndex(event, optionIndex);
+        if (!this.overlayVisible) {
+            this.show();
+            this.editable && this.changeFocusedOptionIndex(event, this.findSelectedOptionIndex());
+        } else {
+            const optionIndex = this.focusedOptionIndex() !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex()) : this.clicked() ? this.findFirstOptionIndex() : this.findFirstFocusedOptionIndex();
 
-        !this.overlayVisible && this.show();
+            this.changeFocusedOptionIndex(event, optionIndex);
+        }
+        // const optionIndex = this.focusedOptionIndex() !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex()) : this.findFirstFocusedOptionIndex();
+        // this.changeFocusedOptionIndex(event, optionIndex);
+
+        // !this.overlayVisible && this.show();
         event.preventDefault();
     }
 
@@ -1559,7 +1590,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
             this.overlayVisible && this.hide();
             event.preventDefault();
         } else {
-            const optionIndex = this.focusedOptionIndex() !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex()) : this.findLastFocusedOptionIndex();
+            const optionIndex = this.focusedOptionIndex() !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex()) : this.clicked() ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex();
 
             this.changeFocusedOptionIndex(event, optionIndex);
 
@@ -1634,6 +1665,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
 
     onEnterKey(event) {
         if (!this.overlayVisible) {
+            this.focusedOptionIndex.set(-1);
             this.onArrowDownKey(event);
         } else {
             if (this.focusedOptionIndex() !== -1) {
@@ -1763,8 +1795,11 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     public focus(): void {
         this.applyFocus();
     }
-
-    clear(event: Event) {
+    /**
+     * Clears the model.
+     * @group Method
+     */
+    public clear(event?: Event) {
         this.updateModel(null, event);
         this.clearEditableLabel();
         this.onChange.emit({ originalEvent: event, value: this.value });

src/app/components/inputnumber/inputnumber.ts

@@ -1364,12 +1364,10 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control
         this.focused = false;
 
         let newValue = this.validateValue(this.parseValue(this.input.nativeElement.value));
-
-        this.onBlur.emit(event);
-
         this.input.nativeElement.value = this.formatValue(newValue);
         this.input.nativeElement.setAttribute('aria-valuenow', newValue);
         this.updateModel(event, newValue);
+        this.onBlur.emit(event);
     }
 
     formattedValue() {

src/app/components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "primeng",
-    "version": "17.4.0",
+    "version": "17.5.0",
     "repository": {
         "type": "git",
         "url": "https://github.com/primefaces/primeng"

src/app/components/paginator/paginator.spec.ts

@@ -27,14 +27,20 @@ describe('Paginator', () => {
         expect(paginatorEl).toBeTruthy();
     });
 
-    it('should change style and styleClass', () => {
-        paginator.style = { height: '250px' };
-        paginator.styleClass = 'Primeng ROCKS!';
+    it('should apply style', () => {
+        fixture.componentRef.setInput('style', { height: '250px' });
         fixture.detectChanges();
 
-        const paginatorEl = fixture.debugElement.query(By.css('.p-paginator'));
-        expect(paginatorEl.nativeElement.className).toContain('Primeng ROCKS!');
-        expect(paginatorEl.nativeElement.style.height).toEqual('250px');
+        const paginatorElement = fixture.debugElement.query(By.css('.p-paginator'));
+        expect(paginatorElement?.nativeElement?.style?.height).toEqual('250px');
+    });
+
+    it('should apply styleClass', () => {
+        fixture.componentRef.setInput('styleClass', 'p-paginator-bottom');
+        fixture.detectChanges();
+
+        const paginatorElement = fixture.debugElement.query(By.css('.p-paginator'));
+        expect(paginatorElement?.nativeElement).toHaveClass('p-paginator-bottom');
     });
 
     it('should use alwaysShow false', () => {