Merge branch 'master' into nested-dialog-keyboard-navigation

primefaces · May 3, 2024 · 1146c26 · 1146c26
2 parents 93d1c54 + 9df3367
commit 1146c26
Show file tree

Hide file tree

Showing 213 changed files with 814 additions and 354 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,29 @@
 # Changelog
+## [17.16.0](https://github.com/primefaces/primeng/tree/17.16.0) (2024-05-03)
+[Full Changelog](https://github.com/primefaces/primeng/compare/17.15.0...17.16.0)
+
+**Implemented New Features and Enhancements:**
+- Add variant input property for form components. [\#15328](https://github.com/primefaces/primeng/issues/15328)
+- Fileupload | add headerTemplate & emptyTemplate. [\#15430](https://github.com/primefaces/primeng/issues/15430)
+- Multiselect | add loadingIconTemplate [\#15431](https://github.com/primefaces/primeng/issues/15431)
+
+**Fixed bugs:**
+- Split Button: Aria Label not correctly working [\#15342](https://github.com/primefaces/primeng/issues/15342)
+- Scroller: When itemSize is not set, scrolling to top results in component crash [\#15395](https://github.com/primefaces/primeng/issues/15395)
+- Tree: Search results are not updated when new data is added [\#15193](https://github.com/primefaces/primeng/issues/15193)
+- MegaMenu | Keyboard navigation is broken [\#15110](https://github.com/primefaces/primeng/issues/15110)
+- Component: Paginator aria replacement problem [\#15413](https://github.com/primefaces/primeng/issues/15413)
+- primeNg timeline vertical alignment broken in case of small devices [\#14582](https://github.com/primefaces/primeng/issues/14582)
+- Dropdown loses focus in accordion when using arrow keys [\#14953](https://github.com/primefaces/primeng/issues/14953)
+- Calendar: minDate bug when using 12 hourFormat [\#15286](https://github.com/primefaces/primeng/issues/15286)
+- p-timeline not mobile responsive in the template section of the timeline documentation [\#15424](https://github.com/primefaces/primeng/issues/15424)
+- Fileupload and autocomplete: problems with input transform function [\#15332](https://github.com/primefaces/primeng/issues/15332)
+- DynamicDialog: closeOnEscape and dismissableMask not working in combination with closable=false [\#15401](https://github.com/primefaces/primeng/issues/15401)
+- TieredMenu Submenus do not display within viewport [\#13929](https://github.com/primefaces/primeng/issues/13929)
+- keyboard event code is coming as empty for backspace [\#15442](https://github.com/primefaces/primeng/issues/15442)
+- p-menu w/ popup: enter key on number pad doesn't select menu item (accessibility issue) [\#15415](https://github.com/primefaces/primeng/issues/15415)
+- Broken Unit Tests [\#15416](https://github.com/primefaces/primeng/issues/15416)
+
 ## [17.15.0](https://github.com/primefaces/primeng/tree/17.15.0) (2024-04-26)
 [Full Changelog](https://github.com/primefaces/primeng/compare/17.14.1...17.15.0)
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "primeng",
-    "version": "17.15.0",
+    "version": "17.16.0",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {
         "ng": "ng",

diff --git a/src/app/components/api/treenode.ts b/src/app/components/api/treenode.ts
@@ -75,9 +75,8 @@ export interface TreeNode<T = any> {
      * Mandatory unique key of the node.
      */
     key?: string;
-     /**
+    /**
      * Mandatory unique key of the node.
      */
     loading?: boolean;
-
 }
diff --git a/src/app/components/breadcrumb/breadcrumb.ts b/src/app/components/breadcrumb/breadcrumb.ts
@@ -224,7 +224,7 @@ export class Breadcrumb implements AfterContentInit {
                 case 'item':
                     this.itemTemplate = item.template;
                     break;
-                    
+
                 default:
                     this.itemTemplate = item.template;
                     break;

diff --git a/src/app/components/contextmenu/contextmenu.interface.ts b/src/app/components/contextmenu/contextmenu.interface.ts
@@ -13,8 +13,7 @@ export interface ContextMenuTemplates {
         /**
          * Item instance.
          */
-        $implicit: MenuItem
-
+        $implicit: MenuItem;
     }): TemplateRef<{ $implicit: MenuItem }>;
     /**
      * Custom template of submenuicon.

diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts
@@ -1581,6 +1581,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
 
         // !this.overlayVisible && this.show();
         event.preventDefault();
+        event.stopPropagation();
     }
 
     changeFocusedOptionIndex(event, index) {
@@ -1681,15 +1682,15 @@ 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.clicked() ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex();
 
             this.changeFocusedOptionIndex(event, optionIndex);
 
             !this.overlayVisible && this.show();
-            event.preventDefault();
         }
+        event.preventDefault();
+        event.stopPropagation();
     }
 
     onArrowLeftKey(event: KeyboardEvent, pressedInInputText: boolean = false) {
@@ -1790,6 +1791,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
                 this.overlayVisible && this.hide(this.filter);
             }
         }
+        event.stopPropagation();
     }
 
     onFirstHiddenFocus(event) {

diff --git a/src/app/components/megamenu/megamenu.interface.ts b/src/app/components/megamenu/megamenu.interface.ts
@@ -10,11 +10,10 @@ export interface MegaMenuTemplates {
      * Custom item template.
      */
     item(context: {
-    /**
-     * Item instance.
-     */
-    $implicit: MenuItem
-
+        /**
+         * Item instance.
+         */
+        $implicit: MenuItem;
     }): TemplateRef<{ $implicit: MenuItem }>;
     /**
      * Custom template of start.

diff --git a/src/app/components/megamenu/megamenu.spec.ts b/src/app/components/megamenu/megamenu.spec.ts
@@ -211,7 +211,7 @@ describe('MegaMenu', () => {
         fixture.detectChanges();
 
         expect(itemClickSpy).toHaveBeenCalled();
-        expect(megamenu.activeItem).toEqual(null);
+        expect(megamenu.activeItem()).toEqual(null);
     });
 
     it("shouldn't  call itemClick ", () => {
@@ -366,7 +366,7 @@ describe('MegaMenu', () => {
         expect(tv1Div.className).toContain('p-megamenu-col-4');
     });
 
-    it('should item get p-megamenu-col-3', () => {
+    it('should item get p-megamenu-col-6', () => {
         megamenu.model = [
             {
                 label: 'TVV',
@@ -405,7 +405,7 @@ describe('MegaMenu', () => {
         let tv1Div = fixture.debugElement.query(By.css('.p-megamenu-grid')).query(By.css('div')).nativeElement;
         fixture.detectChanges();
 
-        expect(tv1Div.className).toContain('p-megamenu-col-3');
+        expect(tv1Div.className).toContain('p-megamenu-col-6');
     });
 
     it('should item get p-megamenu-col-2', () => {
@@ -465,4 +465,80 @@ describe('MegaMenu', () => {
 
         expect(tv1Div.className).toContain('p-megamenu-col-2');
     });
+
+    it('should move to the next item onKeyboardArrowKeyDown', () => {
+        megamenu.model = [
+            {
+                label: 'TV',
+                icon: 'pi pi-fw pi-check',
+                items: [
+                    [
+                        {
+                            label: 'TV 1',
+                            items: [{ label: 'TV 1.1' }, { label: 'TV 1.2' }]
+                        },
+                        {
+                            label: 'TV 2',
+                            items: [{ label: 'TV 2.1' }, { label: 'TV 2.2' }]
+                        }
+                    ]
+                ]
+            },
+            {
+                label: 'Sports',
+                icon: 'pi pi-fw pi-soccer-ball-o',
+                items: [
+                    [
+                        {
+                            label: 'Sports 1',
+                            items: [{ label: 'Sports 1.1' }, { label: 'Sports 1.2' }]
+                        },
+                        {
+                            label: 'Sports 2',
+                            items: [{ label: 'Sports 2.1' }, { label: 'Sports 2.2' }]
+                        }
+                    ]
+                ]
+            }
+        ];
+
+        const onArrowDownKeySpy = spyOn(megamenu, 'onArrowDownKey').and.callThrough();
+
+        //focus on menu
+        megamenu.onMenuFocus(new Event(''));
+        fixture.detectChanges();
+
+        const parentMenuEl = fixture.debugElement.query(By.css('.p-megamenu-root-list'));
+        const tvEl = parentMenuEl.children[0];
+
+        expect(megamenu.focusedItemInfo().index).toBe(0);
+        expect(megamenu.focusedItemInfo().parentKey).toBe('');
+        expect(megamenu.focusedItemInfo().item.label).toBe('TV');
+        expect(tvEl.attributes['aria-expanded']).toBe('false');
+
+        //simulate keyboard arrow down key press
+        const event = new KeyboardEvent('keydown', { key: 'ArrowDown', code: 'ArrowDown' });
+        parentMenuEl.nativeElement.dispatchEvent(event);
+        fixture.detectChanges();
+
+        expect(onArrowDownKeySpy).toHaveBeenCalled();
+        expect(megamenu.focusedItemInfo().index).toBe(0);
+        expect(megamenu.focusedItemInfo().parentKey).toBe('0_0_0');
+        expect(megamenu.focusedItemInfo().item.label).toBe('TV 1.1');
+        expect(tvEl.attributes['aria-expanded']).toBe('true');
+
+        //keyboard arrow down key press again
+        parentMenuEl.nativeElement.dispatchEvent(event);
+        fixture.detectChanges();
+        expect(megamenu.focusedItemInfo().index).toBe(1);
+        expect(megamenu.focusedItemInfo().parentKey).toBe('0_0_0');
+        expect(megamenu.focusedItemInfo().item.label).toBe('TV 1.2');
+
+        //keyboard arrow down key press again
+        parentMenuEl.nativeElement.dispatchEvent(event);
+        fixture.detectChanges();
+        expect(megamenu.focusedItemInfo().index).toBe(2);
+        expect(megamenu.focusedItemInfo().parentKey).toBe('0_0_1');
+        expect(megamenu.focusedItemInfo().item.label).toBe('TV 2.1');
+    });
 });
diff --git a/src/app/components/megamenu/megamenu.ts b/src/app/components/megamenu/megamenu.ts
@@ -504,7 +504,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
     get visibleItems() {
         const processedItem = ObjectUtils.isNotEmpty(this.activeItem()) ? this.activeItem() : null;
 
-        return processedItem && processedItem.key === this.focusedItemInfo().parentKey
+        return processedItem
             ? processedItem.items.reduce((items, col) => {
                   col.forEach((submenu) => {
                       submenu.items.forEach((a) => {

diff --git a/src/app/components/menu/menu.interface.ts b/src/app/components/menu/menu.interface.ts
@@ -21,18 +21,15 @@ export interface MenuTemplates {
         /**
          * Item instance.
          */
-        $implicit: MenuItem
-
+        $implicit: MenuItem;
     }): TemplateRef<{ $implicit: MenuItem }>;
-      /**
+    /**
      * Custom template of submenuheader.
      */
     submenuheader(context: {
         /**
          * Item instance.
          */
-        $implicit: MenuItem
-
+        $implicit: MenuItem;
     }): TemplateRef<{ $implicit: MenuItem }>;
-
 }
diff --git a/src/app/components/menubar/menubar.spec.ts b/src/app/components/menubar/menubar.spec.ts
@@ -242,7 +242,6 @@ describe('Menubar', () => {
 
         expect(firstParentEl?.parent?.parent?.nativeElement.className).toContain('p-menuitem-active');
         expect(secondParentEl?.parent?.parent?.nativeElement.className).not.toContain('p-menuitem-active');
-
     });
 
     it('should show router items', () => {

diff --git a/src/app/components/menubar/menubar.ts b/src/app/components/menubar/menubar.ts
@@ -602,7 +602,7 @@ export class Menubar implements AfterContentInit, OnDestroy, OnInit {
                 case 'item':
                     this.itemTemplate = item.template;
                     break;
-                    
+
                 default:
                     this.itemTemplate = item.template;
                     break;

diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts
@@ -490,7 +490,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
      * When specified, displays an input field to filter the items on keyup.
      * @group Props
      */
-    @Input({ transform: booleanAttribute }) filter: boolean = false;
+    @Input({ transform: booleanAttribute }) filter: boolean = true;
     /**
      * Defines placeholder of the filter input.
      * @group Props

diff --git a/src/app/components/package.json b/src/app/components/package.json
@@ -1,6 +1,6 @@
 {
     "name": "primeng",
-    "version": "17.15.0",
+    "version": "17.16.0",
     "repository": {
         "type": "git",
         "url": "https://github.com/primefaces/primeng"
-Original file line number
+Diff line change
@@ Expand Up / @@ -242,7 +242,6 @@ describe('Menubar', () => { @@
             expect(firstParentEl?.parent?.parent?.nativeElement.className).toContain('p-menuitem-active');
             expect(secondParentEl?.parent?.parent?.nativeElement.className).not.toContain('p-menuitem-active');
         });
         it('should show router items', () => {
@@ Expand Down @@