Merge branch 'master' into issues-14190-14318-fix

primefaces · Jan 4, 2024 · f5302d8 · f5302d8
2 parents 2c2496d + 96560a1
commit f5302d8
Show file tree

Hide file tree

Showing 199 changed files with 3,419 additions and 1,890 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,59 @@
 # Changelog
+## [17.3.0](https://github.com/primefaces/primeng/tree/17.3.0) (2023-12-28)
+
+[Full Changelog](https://github.com/primefaces/primeng/compare/17.2.0...17.3.0)
+**Breaking Changes:**
+- Dropdown | Deprecate autoDisplayFirst property [\#14426](https://github.com/primefaces/primeng/issues/14426)
+
+**Implemented New Features and Enhancements:**
+- DynamicDialog: Need to turn off autofocus on first focusable element [\#13486](https://github.com/primefaces/primeng/issues/13486)
+- Inconsistent filtering behavior in p-dropdown when options contain diacritics [\#10482](https://github.com/primefaces/primeng/issues/10482)
+
+**Fixed bugs:**
+- Component: ToggleButton [\#14443](https://github.com/primefaces/primeng/issues/14443)
+- Tree removed css classes [\#14445](https://github.com/primefaces/primeng/issues/14445)
+- Component: Sidebar [\#14254](https://github.com/primefaces/primeng/issues/14254)
+- Overlay Panel: Interaction with components inside panel template cause panel to hide [\#14323](https://github.com/primefaces/primeng/issues/14323)
+- Menu | itemClick requires double click in popup mode if items generated by function [\#13934](https://github.com/primefaces/primeng/issues/13934)
+- Component: p-picklist [\#14420](https://github.com/primefaces/primeng/issues/14420)
+- Component: Dropdown - If editable is true and optionValue is present, the selected option will not be shown [\#14427](https://github.com/primefaces/primeng/issues/14427)
+- columnFilter: unwanted close on mouseup [\#14410](https://github.com/primefaces/primeng/issues/14410)
+- p-paginator: not accessible [\#12684](https://github.com/primefaces/primeng/issues/12684)
+- Tooltip arrow is broken [\#12579](https://github.com/primefaces/primeng/issues/12579)
+- AutoComplete: (Multiple) Placeholder does not disappear after selecting item [\#14376](https://github.com/primefaces/primeng/issues/14376)
+- Component: MenuItem's property visible wasn't working [\#14316](https://github.com/primefaces/primeng/issues/14316)
+- TreeSelect: Trigger Button missing aria-label [\#14355](https://github.com/primefaces/primeng/issues/14355)
+- p-menubar: ERROR TypeError: Cannot read properties of undefined (reading 'item') when clicking on disabled menu item [\#14434](https://github.com/primefaces/primeng/issues/14434)
+- Table/Scroller: Scroller scrolls left when sorting columns [\#14421](https://github.com/primefaces/primeng/issues/14421)
+- Multiselect: pTemplate="selectedItems" layout is empty on first render using Reactive forms [\#14424](https://github.com/primefaces/primeng/issues/14424)
+- Menubar | submenuicon template does not work [\#14430](https://github.com/primefaces/primeng/issues/14430)
+
+## [17.2.0](https://github.com/primefaces/primeng/tree/17.2.0) (2023-12-20)
+
+[Full Changelog](https://github.com/primefaces/primeng/compare/17.1.0...17.2.0)
+
+**Implemented New Features and Enhancements:**
+- InputGroup | Add styleClass and style input properties [\#14404](https://github.com/primefaces/primeng/issues/14404)
+- ContextMenu | Touch Device support [\#14375](https://github.com/primefaces/primeng/issues/14375)
+
+**Fixed bugs:**
+- Lara Light Teal: $highlightBg implementation defect [\#14414](https://github.com/primefaces/primeng/issues/14414)
+- Table: Not able to provide custom Icons for column filter clear icon [\#14397](https://github.com/primefaces/primeng/issues/14397)
+- BlockUI: entire page is blocked if "blocked" input contains true by default (even if a target is defined) [\#14230](https://github.com/primefaces/primeng/issues/14230)
+- Inputnumber: Inputnumber#currency mode not allowing to remove minus sign for Dollar and INR fields. [\#14327](https://github.com/primefaces/primeng/issues/14327)
+- Galleria: After images change not correct numVisible value in component. [\#14401](https://github.com/primefaces/primeng/issues/14401)
+- Multiselect does not focus filter input [\#14387](https://github.com/primefaces/primeng/issues/14387)
+- Accordion: TextArea shortcuts are not working when used in Accordian Panels [\#14368](https://github.com/primefaces/primeng/issues/14368)
+- Component: Autocomplete with long list of options adds scrollbar to the whole page [\#14281](https://github.com/primefaces/primeng/issues/14281)
+- Dropdown Empty Filter Message not displayed [\#14409](https://github.com/primefaces/primeng/issues/14409)
+- PickList: Filtering bug, when moving item to target list [\#14334](https://github.com/primefaces/primeng/issues/14334)
+- Drodown: Unable to type spaces in editable dropdowns [\#14377](https://github.com/primefaces/primeng/issues/14377)
+- Table | Apply Rule and Remove Rule texts are not visible in column filter [\#14365](https://github.com/primefaces/primeng/issues/14365)
+- Autocomplete: ForceSelection does not force selection - formControl value is changed even without selection [\#14389](https://github.com/primefaces/primeng/issues/14389)
+- Table: Sort icons are not showing correct amount directions [\#14403](https://github.com/primefaces/primeng/issues/14403)
+- Component: PanelMenu repeated rendering [\#14373](https://github.com/primefaces/primeng/issues/14373)
+- Table | Resized column style is not applied (w/column reorder) [\#14386](https://github.com/primefaces/primeng/issues/14386)
+
 ## [17.1.0](https://github.com/primefaces/primeng/tree/17.1.0) (2023-12-13)
 
 [Full Changelog](https://github.com/primefaces/primeng/compare/17.0.0...17.1.0)
@@ -81,6 +136,11 @@
 - TypeError: this.focusedItemInfo.mutate is not a function [\#14119](https://github.com/primefaces/primeng/issues/14119)
 - Upgrade to Angular 17? [\#14063](https://github.com/primefaces/primeng/issues/14063)
 
+## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [16.9.3-LTS](https://www.npmjs.com/package/primeng/v/16.9.3-lts) (2023-12-28)
+
+**Fixed bugs:**
+- LTS 14 & 16 - Update LicenseManager and fix the false version check [\#14449](https://github.com/primefaces/primeng/issues/14449)
+
 ## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [16.9.2-LTS](https://www.npmjs.com/package/primeng/v/16.9.2-lts) (2023-12-14)
 
 **Fixed bugs:**
@@ -910,6 +970,10 @@
 - Sidebar: Footer Templating [\#12259](https://github.com/primefaces/primeng/issues/12259)
 - Calendar: Day names don't update [\#12148](https://github.com/primefaces/primeng/issues/12148)
 
+## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [14.2.17-LTS](https://www.npmjs.com/package/primeng/v/14.2.17-lts) (2023-12-28)
+**Fixed bugs:**
+- LTS 14 & 16 - Update LicenseManager and fix the false version check [\#14449](https://github.com/primefaces/primeng/issues/14449)
+
 ## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [14.2.16-LTS](https://www.npmjs.com/package/primeng/v/14.2.16-lts) (2023-11-17)
 **Fixed bugs:**
 - Fileupload component disables upload button [\#14046](https://github.com/primefaces/primeng/issues/14046)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "primeng",
-    "version": "17.1.0",
+    "version": "17.3.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",

diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts
@@ -145,7 +145,7 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
                         [required]="required"
                         [attr.name]="name"
                         role="combobox"
-                        [attr.placeholder]="placeholder"
+                        [attr.placeholder]="!filled ? placeholder : null"
                         [attr.size]="size"
                         aria-autocomplete="list"
                         [maxlength]="maxlength"

diff --git a/src/app/components/blockui/blockui.ts b/src/app/components/blockui/blockui.ts
@@ -104,7 +104,7 @@ export class BlockUI implements AfterViewInit, OnDestroy {
     block() {
         if (isPlatformBrowser(this.platformId)) {
             this._blocked = true;
-            (this.mask as ElementRef).nativeElement.style.display = 'flex'
+            (this.mask as ElementRef).nativeElement.style.display = 'flex';
 
             if (this.target) {
                 this.target.getBlockableElement().appendChild((this.mask as ElementRef).nativeElement);

diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts
@@ -479,6 +479,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     @Input() autoDisplayFirst: boolean = true;
     /**
      * Whether to display options as grouped when nested options are provided.
+     * @deprecated since v17.3.0, set initial value by model instead.
      * @group Props
      */
     @Input() group: boolean | undefined;
@@ -927,14 +928,14 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
             const modelValue = this.modelValue();
             const visibleOptions = this.visibleOptions();
 
-            if (modelValue && this.editable) {
-                this.updateEditableLabel();
-            }
-
             if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions)) {
                 this.selectedOption = visibleOptions[this.findSelectedOptionIndex()];
                 this.cd.markForCheck();
             }
+
+            if (modelValue && this.editable) {
+                this.updateEditableLabel();
+            }
         });
     }
 
@@ -1057,7 +1058,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
         const value = this.getOptionValue(option);
         this.updateModel(value, event);
         this.focusedOptionIndex.set(this.findSelectedOptionIndex());
-        isHide && this.hide(true);
+        isHide && setTimeout(() => this.hide(true), 1);
         preventChange === false && this.onChange.emit({ originalEvent: event, value: value });
     }
 
@@ -1102,7 +1103,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
 
     updateEditableLabel(): void {
         if (this.editableInputViewChild) {
-            this.editableInputViewChild.nativeElement.value = this.getOptionLabel(this.modelValue()) === undefined ? this.editableInputViewChild.nativeElement.value : this.getOptionLabel(this.modelValue());
+            this.editableInputViewChild.nativeElement.value = ObjectUtils.isNotEmpty(this.selectedOption) ? this.getOptionLabel(this.selectedOption) : this.editableInputViewChild.nativeElement.value;
         }
     }
 
@@ -1199,6 +1200,8 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
         this.onModelChange(value);
         this.updateModel(value, event);
         this.onChange.emit({ originalEvent: event, value: value });
+
+        !this.overlayVisible && ObjectUtils.isNotEmpty(value) && this.show();
     }
     /**
      * Displays the panel.
@@ -1212,6 +1215,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
         if (isFocus) {
             DomHandler.focus(this.focusInputViewChild?.nativeElement);
         }
+
         this.cd.markForCheck();
     }
 
@@ -1262,8 +1266,14 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
         if (this.filter && this.resetFilterOnHide) {
             this.resetFilter();
         }
-
-        isFocus && DomHandler.focus(this.focusInputViewChild?.nativeElement);
+        if (isFocus) {
+            if (this.focusInputViewChild) {
+                DomHandler.focus(this.focusInputViewChild?.nativeElement);
+            }
+            if (this.editable && this.editableInputViewChild) {
+                DomHandler.focus(this.editableInputViewChild?.nativeElement);
+            }
+        }
         this.cd.markForCheck();
     }
 

diff --git a/src/app/components/dynamicdialog/dynamicdialog-config.ts b/src/app/components/dynamicdialog/dynamicdialog-config.ts
@@ -40,6 +40,11 @@ export class DynamicDialogConfig<T = any> {
      * @group Props
      */
     closeOnEscape?: boolean;
+    /**
+     * Specifies if autofocus should happen on show.
+     * @group Props
+     */
+    focusOnShow?: boolean = true;
     /**
      * Base zIndex value to use in layering.
      * @group Props

diff --git a/src/app/components/dynamicdialog/dynamicdialog.ts b/src/app/components/dynamicdialog/dynamicdialog.ts
@@ -333,7 +333,10 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy {
                 if (this.config.modal !== false) {
                     this.enableModality();
                 }
-                this.focus();
+
+                if (this.config.focusOnShow === true) {
+                    this.focus();
+                }
                 break;
 
             case 'void':

diff --git a/src/app/components/listbox/listbox.ts b/src/app/components/listbox/listbox.ts
@@ -392,7 +392,7 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor,
      * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
      * @group Props
      */
-    @Input() metaKeySelection: boolean = true;
+    @Input() metaKeySelection: boolean = false;
     /**
      * A property to uniquely identify a value in options.
      * @group Props

diff --git a/src/app/components/megamenu/megamenu.ts b/src/app/components/megamenu/megamenu.ts
@@ -37,6 +37,7 @@ import { ObjectUtils, UniqueComponentId } from 'primeng/utils';
     selector: 'p-megaMenuSub',
     template: `
         <ul
+            *ngIf="isSubmenuVisible(submenu)"
             #menubar
             [ngClass]="{ 'p-megamenu-root-list': root, 'p-submenu-list p-megamenu-submenu': !root }"
             [attr.role]="root ? 'menubar' : 'menu'"
@@ -312,6 +313,14 @@ export class MegaMenuSub {
         };
     }
 
+    isSubmenuVisible(submenu: any) {
+        if (this.submenu && !this.root) {
+            return this.isItemVisible(submenu);
+        } else {
+            return true;
+        }
+    }
+
     isItemVisible(processedItem: any): boolean {
         return this.getItemProp(processedItem, 'visible') !== false;
     }
@@ -605,7 +614,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
             this.focusedItemInfo.set({ index, key, parentKey, item });
 
             this.dirty = !root;
-            DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement);
+            DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement);
         } else {
             if (grouped) {
                 this.onItemChange(event);
@@ -614,7 +623,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
                 this.hide(originalEvent);
                 this.changeFocusedItemInfo(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1);
 
-                DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement);
+                DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement);
             }
         }
     }
@@ -627,7 +636,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
 
     scrollInView(index: number = -1) {
         const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId;
-        const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${id}"]`);
+        const element = DomHandler.findSingle(this.rootmenu?.el.nativeElement, `li[id="${id}"]`);
 
         if (element) {
             element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
@@ -648,14 +657,14 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
         this.focusedItemInfo.set({ index, key, parentKey, item });
 
         grouped && (this.dirty = true);
-        isFocus && DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement);
+        isFocus && DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement);
     }
 
     hide(event?, isFocus?: boolean) {
         this.activeItem.set(null);
         this.focusedItemInfo.set({ index: -1, key: '', parentKey: '', item: null });
 
-        isFocus && DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement);
+        isFocus && DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement);
         this.dirty = false;
     }
 
@@ -982,7 +991,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
 
     onEnterKey(event: KeyboardEvent) {
         if (this.focusedItemInfo().index !== -1) {
-            const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${`${this.focusedItemId}`}"]`);
+            const element = DomHandler.findSingle(this.rootmenu?.el?.nativeElement, `li[id="${`${this.focusedItemId}`}"]`);
             const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
 
             anchorElement ? anchorElement.click() : element && element.click();
@@ -1035,7 +1044,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = this.renderer.listen(this.document, 'click', (event) => {
-                    const isOutsideContainer = this.rootmenu.el.nativeElement !== event.target && !this.rootmenu.el.nativeElement.contains(event.target);
+                    const isOutsideContainer = this.rootmenu?.el.nativeElement !== event.target && !this.rootmenu?.el.nativeElement.contains(event.target);
 
                     if (isOutsideContainer) {
                         this.hide();

diff --git a/src/app/components/menu/menu.ts b/src/app/components/menu/menu.ts
@@ -159,7 +159,7 @@ export class MenuItemContent {
                 class="p-menu-list p-reset"
                 role="menu"
                 [attr.id]="id + '_list'"
-                [tabindex]="tabindex"
+                [attr.tabindex]="getTabIndexValue()"
                 [attr.data-pc-section]="'menu'"
                 [attr.aria-activedescendant]="activedescendant()"
                 [attr.aria-label]="ariaLabel"
@@ -432,6 +432,10 @@ export class Menu implements OnDestroy {
         });
     }
 
+    getTabIndexValue(): string | null {
+        return this.tabindex !== undefined ? this.tabindex.toString() : null;
+    }
+
     onOverlayAnimationStart(event: AnimationEvent) {
         switch (event.toState) {
             case 'visible':
@@ -526,24 +530,28 @@ export class Menu implements OnDestroy {
     }
 
     onListFocus(event: Event) {
-        this.focused = true;
-        if (!this.popup) {
-            if (this.selectedOptionIndex() !== -1) {
-                this.changeFocusedOptionIndex(this.selectedOptionIndex());
-                this.selectedOptionIndex.set(-1);
-            } else {
-                this.changeFocusedOptionIndex(0);
+        if (!this.focused) {
+            this.focused = true;
+            if (!this.popup) {
+                if (this.selectedOptionIndex() !== -1) {
+                    this.changeFocusedOptionIndex(this.selectedOptionIndex());
+                    this.selectedOptionIndex.set(-1);
+                } else {
+                    this.changeFocusedOptionIndex(0);
+                }
             }
+            this.onFocus.emit(event);
         }
-        this.onFocus.emit(event);
     }
 
     onListBlur(event: FocusEvent | MouseEvent) {
-        this.focused = false;
-        this.changeFocusedOptionIndex(-1);
-        this.selectedOptionIndex.set(-1);
-        this.focusedOptionIndex.set(-1);
-        this.onBlur.emit(event);
+        if (this.focused) {
+            this.focused = false;
+            this.changeFocusedOptionIndex(-1);
+            this.selectedOptionIndex.set(-1);
+            this.focusedOptionIndex.set(-1);
+            this.onBlur.emit(event);
+        }
     }
 
     onListKeyDown(event) {
@@ -655,6 +663,11 @@ export class Menu implements OnDestroy {
     itemClick(event: any, id: string) {
         const { originalEvent, item } = event;
 
+        if (!this.focused) {
+            this.focused = true;
+            this.onFocus.emit();
+        }
+
         if (item.disabled) {
             originalEvent.preventDefault();
             return;