fix tieredMenuSub not positioning itself within viewport

primefaces · May 3, 2024 · 0cd14ad · 0cd14ad
1 parent 3365c74
commit 0cd14ad
Showing 1 changed file with 15 additions and 7 deletions.
diff --git a/src/app/components/tieredmenu/tieredmenu.ts b/src/app/components/tieredmenu/tieredmenu.ts
@@ -24,6 +24,7 @@ import {
     booleanAttribute,
     effect,
     forwardRef,
+    input,
     numberAttribute,
     signal
 } from '@angular/core';
@@ -176,7 +177,7 @@ import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';
                         [itemTemplate]="itemTemplate"
                         [autoDisplay]="autoDisplay"
                         [menuId]="menuId"
-                        [activeItemPath]="activeItemPath"
+                        [activeItemPath]="activeItemPath()"
                         [focusedItemId]="focusedItemId"
                         [ariaLabelledBy]="getItemId(processedItem)"
                         [level]="level + 1"
@@ -217,7 +218,7 @@ export class TieredMenuSub {
 
     @Input() focusedItemId: string | undefined;
 
-    @Input() activeItemPath: any[];
+    activeItemPath = input<any[]>([]);
 
     @Input({ transform: numberAttribute }) tabindex: number = 0;
 
@@ -233,16 +234,23 @@ export class TieredMenuSub {
 
     @ViewChild('sublist', { static: true }) sublistViewChild: ElementRef;
 
-    constructor(public el: ElementRef, public renderer: Renderer2, @Inject(forwardRef(() => TieredMenu)) public tieredMenu: TieredMenu) {}
+    constructor(public el: ElementRef, public renderer: Renderer2, @Inject(forwardRef(() => TieredMenu)) public tieredMenu: TieredMenu) {
+        effect(() => {
+            const path = this.activeItemPath();
+            if (ObjectUtils.isNotEmpty(path)) {
+                this.positionSubmenu();
+            }
+        })
+    }
 
     positionSubmenu() {
         const sublist = this.sublistViewChild && this.sublistViewChild.nativeElement;
 
-        if (sublist) {
+        if (sublist && !DomHandler.hasClass(sublist, 'p-submenu-list-flipped')) {
             const parentItem = sublist.parentElement.parentElement;
             const containerOffset = DomHandler.getOffset(parentItem);
             const viewport = DomHandler.getViewport();
-            const sublistWidth = sublist.offsetParent ? sublist.offsetWidth : DomHandler.getHiddenElementOuterWidth(sublist);
+            const sublistWidth = sublist.offsetParent ? sublist.offsetWidth : DomHandler.getOuterWidth(sublist);
             const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
 
             if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
@@ -306,8 +314,8 @@ export class TieredMenuSub {
     }
 
     isItemActive(processedItem: any): boolean {
-        if (this.activeItemPath) {
-            return this.activeItemPath.some((path) => path.key === processedItem.key);
+        if (this.activeItemPath()) {
+            return this.activeItemPath().some((path) => path.key === processedItem.key);
         }
     }