From 4f27e34d7a2d391502089b98faad820887e8630f Mon Sep 17 00:00:00 2001 From: Dale Nguyen Date: Sun, 10 Mar 2024 15:17:22 -0400 Subject: [PATCH 1/3] fix: first item focused on toggle --- src/app/components/tieredmenu/tieredmenu.ts | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/src/app/components/tieredmenu/tieredmenu.ts b/src/app/components/tieredmenu/tieredmenu.ts index b72a5e105a0..e52916f178c 100755 --- a/src/app/components/tieredmenu/tieredmenu.ts +++ b/src/app/components/tieredmenu/tieredmenu.ts @@ -49,7 +49,6 @@ import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils'; [attr.aria-orientation]="'vertical'" [attr.data-pc-section]="'menu'" (keydown)="menuKeydown.emit($event)" - (focus)="menuFocus.emit($event)" (blur)="menuBlur.emit($event)" > @@ -223,15 +222,13 @@ export class TieredMenuSub { @Output() itemMouseEnter: EventEmitter = new EventEmitter(); - @Output() menuFocus: EventEmitter = new EventEmitter(); - @Output() menuBlur: EventEmitter = new EventEmitter(); @Output() menuKeydown: EventEmitter = new EventEmitter(); @ViewChild('sublist', { static: true }) sublistViewChild: ElementRef; - constructor(public el: ElementRef, public renderer: Renderer2, private cd: ChangeDetectorRef, @Inject(forwardRef(() => TieredMenu)) public tieredMenu: TieredMenu) {} + constructor(public el: ElementRef, public renderer: Renderer2, @Inject(forwardRef(() => TieredMenu)) public tieredMenu: TieredMenu) {} positionSubmenu() { let sublist = this.sublistViewChild && this.sublistViewChild.nativeElement; @@ -363,7 +360,6 @@ export class TieredMenuSub { [focusedItemId]="focused ? focusedItemId : undefined" [activeItemPath]="activeItemPath()" (itemClick)="onItemClick($event)" - (menuFocus)="onMenuFocus($event)" (menuBlur)="onMenuBlur($event)" (menuKeydown)="onKeyDown($event)" (itemMouseEnter)="onItemMouseEnter($event)" @@ -498,8 +494,6 @@ export class TieredMenu implements OnInit, AfterContentInit, OnDestroy { relativeAlign: boolean | undefined; - private window: Window; - dirty: boolean = false; focused: boolean = false; @@ -544,7 +538,6 @@ export class TieredMenu implements OnInit, AfterContentInit, OnDestroy { public config: PrimeNGConfig, public overlayService: OverlayService ) { - this.window = this.document.defaultView as Window; effect(() => { const path = this.activeItemPath(); @@ -877,12 +870,6 @@ export class TieredMenu implements OnInit, AfterContentInit, OnDestroy { isFocus && DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement); } - onMenuFocus(event: any) { - this.focused = true; - const focusedItemInfo = this.focusedItemInfo().index !== -1 ? this.focusedItemInfo() : { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '', item: this.visibleItems[this.findFirstFocusedItemIndex()]?.item }; - this.focusedItemInfo.set(focusedItemInfo); - } - onMenuBlur(event: any) { this.focused = false; this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '', item: null }); @@ -984,7 +971,7 @@ export class TieredMenu implements OnInit, AfterContentInit, OnDestroy { this.relativeAlign = event?.relativeAlign || null; } - this.focusedItemInfo.set({ index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' }); + this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '' }); isFocus && DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement); From c161b83b0879c6a85fea6a2b3eee64585dd8e182 Mon Sep 17 00:00:00 2001 From: Dale Nguyen Date: Sun, 10 Mar 2024 15:24:37 -0400 Subject: [PATCH 2/3] add back focus status --- src/app/components/tieredmenu/tieredmenu.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/app/components/tieredmenu/tieredmenu.ts b/src/app/components/tieredmenu/tieredmenu.ts index e52916f178c..59d9d6a0391 100755 --- a/src/app/components/tieredmenu/tieredmenu.ts +++ b/src/app/components/tieredmenu/tieredmenu.ts @@ -49,6 +49,7 @@ import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils'; [attr.aria-orientation]="'vertical'" [attr.data-pc-section]="'menu'" (keydown)="menuKeydown.emit($event)" + (focus)="menuFocus.emit($event)" (blur)="menuBlur.emit($event)" > @@ -222,6 +223,8 @@ export class TieredMenuSub { @Output() itemMouseEnter: EventEmitter = new EventEmitter(); + @Output() menuFocus: EventEmitter = new EventEmitter(); + @Output() menuBlur: EventEmitter = new EventEmitter(); @Output() menuKeydown: EventEmitter = new EventEmitter(); @@ -360,6 +363,7 @@ export class TieredMenuSub { [focusedItemId]="focused ? focusedItemId : undefined" [activeItemPath]="activeItemPath()" (itemClick)="onItemClick($event)" + (menuFocus)="onMenuFocus($event)" (menuBlur)="onMenuBlur($event)" (menuKeydown)="onKeyDown($event)" (itemMouseEnter)="onItemMouseEnter($event)" @@ -870,6 +874,10 @@ export class TieredMenu implements OnInit, AfterContentInit, OnDestroy { isFocus && DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement); } + onMenuFocus(event: any) { + this.focused = true; + } + onMenuBlur(event: any) { this.focused = false; this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '', item: null }); From ff3838b6e8ae4bbae7d1cb0cd043e43f5fd77a76 Mon Sep 17 00:00:00 2001 From: Dale Nguyen Date: Sun, 10 Mar 2024 15:29:44 -0400 Subject: [PATCH 3/3] minor improvements --- src/app/components/tieredmenu/tieredmenu.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/components/tieredmenu/tieredmenu.ts b/src/app/components/tieredmenu/tieredmenu.ts index 59d9d6a0391..b26c183af95 100755 --- a/src/app/components/tieredmenu/tieredmenu.ts +++ b/src/app/components/tieredmenu/tieredmenu.ts @@ -234,7 +234,7 @@ export class TieredMenuSub { constructor(public el: ElementRef, public renderer: Renderer2, @Inject(forwardRef(() => TieredMenu)) public tieredMenu: TieredMenu) {} positionSubmenu() { - let sublist = this.sublistViewChild && this.sublistViewChild.nativeElement; + const sublist = this.sublistViewChild && this.sublistViewChild.nativeElement; if (sublist) { const parentItem = sublist.parentElement.parentElement; @@ -845,7 +845,6 @@ export class TieredMenu implements OnInit, AfterContentInit, OnDestroy { anchorElement ? anchorElement.click() : element && element.click(); - const processedItem = this.visibleItems[this.focusedItemInfo().index]; if (!this.popup) { const processedItem = this.visibleItems[this.focusedItemInfo().index]; const grouped = this.isProccessedItemGroup(processedItem);