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) => {