Merge branch 'master' into floatlabel

primefaces · Feb 28, 2024 · 7b11465 · 7b11465
2 parents 172ef8e + c197fd3
commit 7b11465
Show file tree

Hide file tree

Showing 129 changed files with 16,088 additions and 14,353 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,33 @@
 # Changelog
+## [17.8.0](https://github.com/primefaces/primeng/tree/17.8.0) (2024-02-23)
+
+[Full Changelog](https://github.com/primefaces/primeng/compare/17.7.0...17.8.0)
+
+**Implemented New Features and Enhancements:**
+- Component: Chips. No ability to limit max length of chip [\#14592](https://github.com/primefaces/primeng/issues/14592)
+- Sidebar : Combination of role 'complementary' and aria-modal attribute causes accessibility violation. [\#14818](https://github.com/primefaces/primeng/issues/14818)
+
+**Fixed bugs:**
+- DropDown: Making form touched on clearing pre filled values. [\#14836](https://github.com/primefaces/primeng/issues/14836)
+- Component: MultiSelect (p-multiSelect) no longer emits an event when all items are selected or deselected [\#14252](https://github.com/primefaces/primeng/issues/14252)
+- p-multiselect: onChange event is not triggered for multiselect's filter select all/unselect all [\#14252](https://github.com/primefaces/primeng/issues/14252)
+- Component: Multiselect onChange not called [\#14807](https://github.com/primefaces/primeng/issues/14807)
+- Tabview: Forward Button Visible with Fractions [\#14785](https://github.com/primefaces/primeng/issues/14785)
+- ContextMenu: appentTo w/ template variable causes error when ContextMenu is destroyed [\#14793](https://github.com/primefaces/primeng/issues/14793)
+- FileUpload Component [\#14789](https://github.com/primefaces/primeng/issues/14789)
+- Component: Table "Ctrl + A" selects all rows even in selectionMode "single" [\#14795](https://github.com/primefaces/primeng/issues/14795)
+- TabView: Scroll buttons are not displayed when adding tabPanel dynamically [\#13530](https://github.com/primefaces/primeng/issues/13530)
+- DomHandler: getFocusableElements returns elements with hidden parents [\#14691](https://github.com/primefaces/primeng/issues/14691)
+- Component: Dropdown - If editable = true and filter = true and you start typing, it will search by default but not start editing. [\#14567](https://github.com/primefaces/primeng/issues/14567)
+- dropdown: selected, disabled option not rendered when using selectedItem template [\#14809](https://github.com/primefaces/primeng/issues/14809)
+- Component: Dropdown Selected option not shown while typing in filter if it has value null, while having selectedItem template [\#14815](https://github.com/primefaces/primeng/issues/14815)
+- Dropdown: Placeholder is not displayed when using a combination of reactive forms and selectedItem template [\#14801](https://github.com/primefaces/primeng/issues/14801)
+- Dropdown: Dropdown no longer closes when clicking the currently selected option [\#14811](https://github.com/primefaces/primeng/issues/14811)
+- Table: ColumnFilter not hiding when another filter icon clicked and previously any input field clicked in still in focus [\#14775](https://github.com/primefaces/primeng/issues/14775)
+- Checkbox: Disabled checkboxes appear writable until they receive focus [\#14819](https://github.com/primefaces/primeng/issues/14819)
+- Calendar: Autofocus not working [\#14745](https://github.com/primefaces/primeng/issues/14745)
+- When p-chart is put into a p-fieldset, the chart is not responsive anymre [\#14739](https://github.com/primefaces/primeng/issues/14739)
+
 ## [17.7.0](https://github.com/primefaces/primeng/tree/17.7.0) (2024-02-14)
 
 [Full Changelog](https://github.com/primefaces/primeng/compare/17.6.0...17.7.0)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "primeng",
-    "version": "17.7.0",
+    "version": "17.8.0",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {
         "ng": "ng",
@@ -24,22 +24,22 @@
     },
     "devDependencies": {
         "@angular-devkit/build-angular": "^17.0.5",
-        "@angular-eslint/eslint-plugin": "17.1.1",
-        "@angular-eslint/eslint-plugin-template": "17.1.1",
-        "@angular-eslint/schematics": "17.1.1",
-        "@angular-eslint/template-parser": "17.1.1",
-        "@angular/animations": "^17.0.5",
-        "@angular/cdk": "^17.0.2",
-        "@angular/cli": "^17.0.5",
-        "@angular/common": "^17.0.5",
-        "@angular/compiler": "^17.0.5",
-        "@angular/compiler-cli": "^17.0.5",
-        "@angular/core": "^17.0.5",
-        "@angular/forms": "^17.0.5",
-        "@angular/platform-browser": "^17.0.5",
-        "@angular/platform-browser-dynamic": "^17.0.5",
-        "@angular/platform-server": "^17.0.5",
-        "@angular/router": "^17.0.5",
+        "@angular-eslint/eslint-plugin": "17.2.1",
+        "@angular-eslint/eslint-plugin-template": "17.2.1",
+        "@angular-eslint/schematics": "17.2.1",
+        "@angular-eslint/template-parser": "17.2.1",
+        "@angular/animations": "^17.2.2",
+        "@angular/cdk": "^17.2.1",
+        "@angular/cli": "^17.2.1",
+        "@angular/common": "^17.2.2",
+        "@angular/compiler": "^17.2.2",
+        "@angular/compiler-cli": "^17.2.2",
+        "@angular/core": "^17.2.2",
+        "@angular/forms": "^17.2.2",
+        "@angular/platform-browser": "^17.2.2",
+        "@angular/platform-browser-dynamic": "^17.2.2",
+        "@angular/platform-server": "^17.2.2",
+        "@angular/router": "^17.2.2",
         "@stackblitz/sdk": "1.9.0",
         "@types/express": "^4.17.17",
         "@types/jasmine": "~4.3.1",
@@ -72,7 +72,7 @@
         "karma-coverage": "~2.2.0",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.0.0",
-        "ng-packagr": "^17.0.2",
+        "ng-packagr": "^17.2.0",
         "prettier": "2.8.8",
         "primeflex": "^3.3.1",
         "primeicons": "^6.0.1",
@@ -85,7 +85,7 @@
         "typescript": "5.2.2",
         "xlsx": "^0.18.5",
         "zone.js": "~0.14.0",
-        "@angular/ssr": "^17.0.5",
+        "@angular/ssr": "^17.2.1",
         "@docsearch/js": "^3.3.4",
         "esbuild": "^0.19.8"
     }

diff --git a/src/app/components/autofocus/autofocus.ts b/src/app/components/autofocus/autofocus.ts
@@ -24,16 +24,18 @@ export class AutoFocus {
     ngAfterContentChecked() {
         if (!this.focused) {
             if (this.autofocus) {
-                const focusableElements = DomHandler.getFocusableElements(this.host.nativeElement);
+                setTimeout(() => {
+                    const focusableElements = DomHandler.getFocusableElements(this.host.nativeElement);
 
-                if (focusableElements.length === 0) {
-                    this.host.nativeElement.focus();
-                }
-                if (focusableElements.length > 0) {
-                    focusableElements[0].focus();
-                }
+                    if (focusableElements.length === 0) {
+                        this.host.nativeElement.focus();
+                    }
+                    if (focusableElements.length > 0) {
+                        focusableElements[0].focus();
+                    }
 
-                this.focused = true;
+                    this.focused = true;
+                });
             }
         }
     }

diff --git a/src/app/components/checkbox/checkbox.ts b/src/app/components/checkbox/checkbox.ts
@@ -295,8 +295,8 @@ export class Checkbox implements ControlValueAccessor {
     setDisabledState(val: boolean): void {
         setTimeout(() => {
             this.disabled = val;
+            this.cd.markForCheck();
         });
-        this.cd.markForCheck();
     }
 
     checked() {

diff --git a/src/app/components/chips/chips.spec.ts b/src/app/components/chips/chips.spec.ts
@@ -258,6 +258,14 @@ describe('Chips', () => {
         expect(inputEl.nativeElement.disabled).toEqual(false);
     });
 
+    it('should set maxlength to input element', () => {
+        chips.max = 2;
+        fixture.detectChanges();
+
+        const inputEl = fixture.debugElement.query(By.css('input'));
+        expect(inputEl.attributes.maxlength).toEqual('2');
+    });
+
     it('should delete item', () => {
         chips.value = ['primeng'];
         fixture.detectChanges();

diff --git a/src/app/components/chips/chips.ts b/src/app/components/chips/chips.ts
@@ -77,6 +77,7 @@ export const CHIPS_VALUE_ACCESSOR: any = {
                         #inputtext
                         type="text"
                         [attr.id]="inputId"
+                        [attr.maxlength]="maxLength"
                         [attr.placeholder]="value && value.length ? null : placeholder"
                         [attr.tabindex]="tabindex"
                         (keydown)="onKeyDown($event)"
@@ -140,6 +141,11 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
      * @group Props
      */
     @Input() max: number | undefined;
+    /**
+     * Maximum length of a chip.
+     * @group Props
+     */
+    @Input() maxLength: number | undefined;
     /**
      * Defines a string that labels the input for accessibility.
      * @group Props

diff --git a/src/app/components/contextmenu/contextmenu.ts b/src/app/components/contextmenu/contextmenu.ts
@@ -1182,11 +1182,9 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
     }
 
     removeAppendedElements() {
-        if (this.appendTo) {
+        if (this.appendTo && this.containerViewChild) {
             if (this.appendTo === 'body') {
-                if (this.containerViewChild) {
-                    this.renderer.removeChild(this.document.body, this.containerViewChild.nativeElement);
-                }
+                this.renderer.removeChild(this.document.body, this.containerViewChild.nativeElement);
             } else {
                 DomHandler.removeChild(this.containerViewChild.nativeElement, this.appendTo);
             }

diff --git a/src/app/components/dialog/dialog.ts b/src/app/components/dialog/dialog.ts
@@ -34,6 +34,7 @@ import { WindowMinimizeIcon } from 'primeng/icons/windowminimize';
 import { RippleModule } from 'primeng/ripple';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { UniqueComponentId, ZIndexUtils } from 'primeng/utils';
+import { ButtonModule } from 'primeng/button';
 
 const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}')]);
 
@@ -49,6 +50,7 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
             *ngIf="maskVisible"
             [class]="maskStyleClass"
             [style]="maskStyle"
+            (focus)="containerFocus($event)"
             [ngClass]="{
                 'p-dialog-mask': true,
                 'p-component-overlay p-component-overlay-enter': this.modal,
@@ -91,7 +93,17 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
                         </span>
                         <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                         <div class="p-dialog-header-icons">
-                            <button *ngIf="maximizable" role="button" type="button" [ngClass]="{ 'p-dialog-header-icon p-dialog-header-maximize p-link': true }" (click)="maximize()" (keydown.enter)="maximize()" tabindex="-1" pRipple>
+                            <button
+                                *ngIf="maximizable"
+                                role="button"
+                                type="button"
+                                [ngClass]="{ 'p-dialog-header-icon p-dialog-header-maximize p-link': true }"
+                                (click)="maximize()"
+                                (keydown.enter)="maximize()"
+                                [attr.tabindex]="maximizable ? '0' : '-1'"
+                                pRipple
+                                pButton
+                            >
                                 <span *ngIf="maximizeIcon && !maximizeIconTemplate && !minimizeIconTemplate" class="p-dialog-header-maximize-icon" [ngClass]="maximized ? minimizeIcon : maximizeIcon"></span>
                                 <ng-container *ngIf="!maximizeIcon">
                                     <WindowMaximizeIcon *ngIf="!maximized && !maximizeIconTemplate" [styleClass]="'p-dialog-header-maximize-icon'" />
@@ -111,8 +123,9 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
                                 [attr.aria-label]="closeAriaLabel"
                                 (click)="close($event)"
                                 (keydown.enter)="close($event)"
-                                [attr.tabindex]="closeTabindex"
                                 pRipple
+                                pButton
+                                [attr.tabindex]="closeTabindex"
                             >
                                 <ng-container *ngIf="!closeIconTemplate">
                                     <span *ngIf="closeIcon" class="p-dialog-header-close-icon" [ngClass]="closeIcon"></span>
@@ -333,7 +346,7 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy {
      * Index of the close button in tabbing order.
      * @group Props
      */
-    @Input() closeTabindex: string = '-1';
+    @Input() closeTabindex: string = '0';
     /**
      * Name of the minimize icon.
      * @group Props
@@ -1024,7 +1037,7 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy {
 }
 
 @NgModule({
-    imports: [CommonModule, FocusTrapModule, RippleModule, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon],
+    imports: [CommonModule, FocusTrapModule, ButtonModule, RippleModule, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon],
     exports: [Dialog, SharedModule],
     declarations: [Dialog]
 })

diff --git a/src/app/components/dom/domhandler.ts b/src/app/components/dom/domhandler.ts
@@ -630,7 +630,8 @@ export class DomHandler {
         let visibleFocusableElements = [];
 
         for (let focusableElement of focusableElements) {
-            if (getComputedStyle(focusableElement).display != 'none' && getComputedStyle(focusableElement).visibility != 'hidden') visibleFocusableElements.push(focusableElement);
+            const computedStyle = getComputedStyle(focusableElement);
+            if (this.isVisible(focusableElement) && computedStyle.display != 'none' && computedStyle.visibility != 'hidden') visibleFocusableElements.push(focusableElement);
         }
 
         return visibleFocusableElements;

diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts
@@ -152,7 +152,7 @@ export class DropdownItem {
                 <ng-container *ngIf="!selectedItemTemplate; else defaultPlaceholder">{{ label() === 'p-emptylabel' ? '&nbsp;' : label() }}</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="displayPlaceholder()">{{ label() === 'p-emptylabel' ? '&nbsp;' : placeholder() }}</span>
                 </ng-template>
             </span>
             <input
@@ -948,7 +948,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
         // this will find the selected option whether or not the user is currently filtering  because the filtered (i.e. visible) options, are a subset of all the options
         const options = this.getAllVisibleAndNonVisibleOptions();
         // use isOptionEqualsModelValue for the use case where the dropdown is initalized with a disabled option
-        const selectedOptionIndex = options.findIndex((option) => this.isOptionEqualsModelValue(option));
+        const selectedOptionIndex = options.findIndex((option) => this.isOptionValueEqualsModelValue(option));
 
         return selectedOptionIndex !== -1 ? this.getOptionLabel(options[selectedOptionIndex]) : this.placeholder() || 'p-emptylabel';
     });
@@ -969,12 +969,13 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
 
             if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions)) {
                 const selectedOptionIndex = this.findSelectedOptionIndex();
-                if (selectedOptionIndex !== -1 || modelValue === undefined || modelValue === null || this.editable) {
+
+                if (selectedOptionIndex !== -1 || modelValue === undefined || (typeof modelValue === 'string' && modelValue.length === 0) || this.isModelValueNotSet() || this.editable) {
                     this.selectedOption = visibleOptions[selectedOptionIndex];
                 }
             }
 
-            if (ObjectUtils.isEmpty(visibleOptions) && (modelValue === undefined || modelValue === null) && ObjectUtils.isNotEmpty(this.selectedOption)) {
+            if (ObjectUtils.isEmpty(visibleOptions) && (modelValue === undefined || this.isModelValueNotSet()) && ObjectUtils.isNotEmpty(this.selectedOption)) {
                 this.selectedOption = null;
             }
 
@@ -985,6 +986,14 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
         });
     }
 
+    private isModelValueNotSet(): boolean {
+        return this.modelValue() === null && !this.isOptionValueEqualsModelValue(this.selectedOption);
+    }
+
+    displayPlaceholder() {
+        return ObjectUtils.isEmpty(this.selectedOption) && this.label() === this.placeholder();
+    }
+
     private getAllVisibleAndNonVisibleOptions() {
         return this.group ? this.flatOptions(this.options) : this.options || [];
     }
@@ -1146,10 +1155,10 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     }
 
     isSelected(option) {
-        return this.isValidOption(option) && this.isOptionEqualsModelValue(option);
+        return this.isValidOption(option) && this.isOptionValueEqualsModelValue(option);
     }
 
-    private isOptionEqualsModelValue(option: any) {
+    private isOptionValueEqualsModelValue(option: any) {
         return ObjectUtils.equals(this.modelValue(), this.getOptionValue(option), this.equalityKey());
     }
 
@@ -1184,7 +1193,11 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     }
 
     isOptionDisabled(option: any) {
-        return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : option && option.disabled !== undefined ? option.disabled : false;
+        if (this.getOptionValue(this.modelValue()) === this.getOptionValue(option) || (this.getOptionLabel(this.modelValue() === this.getOptionLabel(option)) && option.disabled === false)) {
+            return false;
+        } else {
+            return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : option && option.disabled !== undefined ? option.disabled : false;
+        }
     }
 
     getOptionGroupLabel(optionGroup: any) {
@@ -1309,7 +1322,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
             if (this.filterViewChild && this.filterViewChild.nativeElement) {
                 this.preventModelTouched = true;
 
-                if (this.autofocusFilter) {
+                if (this.autofocusFilter && !this.editable) {
                     this.filterViewChild.nativeElement.focus();
                 }
             }
@@ -1722,7 +1735,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     }
 
     onFirstHiddenFocus(event) {
-        const focusableEl = event.relatedTarget === this.focusInputViewChild?.nativeElement ? DomHandler.getFirstFocusableElement(this.overlayViewChild.el.nativeElement, ':not(.p-hidden-focusable)') : this.focusInputViewChild.nativeElement;
+        const focusableEl = event.relatedTarget === this.focusInputViewChild?.nativeElement ? DomHandler.getFirstFocusableElement(this.overlayViewChild.el?.nativeElement, ':not(.p-hidden-focusable)') : this.focusInputViewChild?.nativeElement;
         DomHandler.focus(focusableEl);
     }
 
@@ -1827,6 +1840,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     public clear(event?: Event) {
         this.updateModel(null, event);
         this.clearEditableLabel();
+        this.onModelTouched();
         this.onChange.emit({ originalEvent: event, value: this.value });
         this.onClear.emit(event);
         this.resetFilter();

diff --git a/src/app/components/fieldset/fieldset.css b/src/app/components/fieldset/fieldset.css
@@ -1,4 +1,7 @@
 @layer primeng {
+    .p-fieldset{
+        min-width: initial;
+    }
     .p-fieldset-legend > a,
     .p-fieldset-legend > span {
         display: flex;