diff --git a/src/app/components/tieredmenu/tieredmenu.ts b/src/app/components/tieredmenu/tieredmenu.ts index b7cb3d944ce..76d134933c0 100755 --- a/src/app/components/tieredmenu/tieredmenu.ts +++ b/src/app/components/tieredmenu/tieredmenu.ts @@ -13,7 +13,7 @@ import { animate, style, transition, trigger, AnimationEvent } from '@angular/an
  • - @@ -21,7 +21,7 @@ import { animate, style, transition, trigger, AnimationEvent } from '@angular/an - @@ -30,7 +30,7 @@ import { animate, style, transition, trigger, AnimationEvent } from '@angular/an - +
  • @@ -66,6 +66,8 @@ export class TieredMenuSub implements OnDestroy { @Output() leafClick: EventEmitter = new EventEmitter(); + @Output() keydownItem: EventEmitter = new EventEmitter(); + _parentActive: boolean; documentClickListener: any; @@ -136,6 +138,84 @@ export class TieredMenuSub implements OnDestroy { this.leafClick.emit(); } + onItemKeyDown(event, item) { + let listItem = event.currentTarget.parentElement; + + switch (event.key) { + case 'ArrowDown': + var nextItem = this.findNextItem(listItem); + if (nextItem) { + nextItem.children[0].focus(); + } + + event.preventDefault(); + break; + + case 'ArrowUp': + var prevItem = this.findPrevItem(listItem); + if (prevItem) { + prevItem.children[0].focus(); + } + + event.preventDefault(); + break; + + case 'ArrowRight': + if (item.items) { + this.activeItem = item; + + if (this.root) { + this.bindDocumentClickListener(); + } + + setTimeout(() => { + listItem.children[1].children[0].children[0].children[0].focus(); + }, 50); + } + + event.preventDefault(); + break; + + default: + break; + } + + this.keydownItem.emit({ + originalEvent: event, + element: listItem + }); + } + + findNextItem(item) { + let nextItem = item.nextElementSibling; + + if (nextItem) + return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem; + else + return null; + } + + findPrevItem(item) { + let prevItem = item.previousElementSibling; + + if (prevItem) + return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem; + else + return null; + } + + onChildItemKeyDown(event) { + if (event.originalEvent.key === 'ArrowLeft') { + this.activeItem = null; + + if (this.root) { + this.unbindDocumentClickListener(); + } + + event.element.parentElement.parentElement.parentElement.children[0].focus(); + } + } + bindDocumentClickListener() { if (!this.documentClickListener) { this.documentClickListener = (event) => {