fix(hotkey): Hotkeys only active when context menu focused

isaacplmann · Jun 30, 2017 · d189b12 · d189b12
1 parent 61ae682
commit d189b12
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,12 @@
+<a name="1.3.2"></a>
+# [1.3.2](https://github.com/isaacplmann/ngx-contextmenu) (2017-06-30)
+
+
+### Fixes
+
+* **hotkey:** Hotkeys only active when context menu focused
+
+
 <a name="1.3.1"></a>
 # [1.3.1](https://github.com/isaacplmann/ngx-contextmenu) (2017-06-29)
 

diff --git a/README.md b/README.md
@@ -292,7 +292,7 @@ export class AppModule {}
 
 ## Keyboard navigation
 
-You can use the keyboard to manipulate the context menu.
+You can use the keyboard to manipulate the context menu.  Note: Keyboard navigation should be used in conjunction with `autoFocus`, since key events are only captured when the context menu is focused.
 
 | Key            | Action                                         |
 |:--------------:|------------------------------------------------|

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-contextmenu",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "An Angular component to show a context menu on an arbitrary component",
   "keywords": [
     "angular2",

diff --git a/src/lib/contextMenuContent.component.ts b/src/lib/contextMenuContent.component.ts
@@ -224,13 +224,14 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView
     this.changeDetector.markForCheck();
   }
 
-  @HostListener('window:keydown.ArrowDown', ['$event'])
+  @HostListener('keydown.ArrowDown', ['$event'])
   public nextItem(event?: KeyboardEvent): void {
     if (!this._contextMenuService.isLeafMenu(this)) {
       return;
     }
     if (event) {
       event.preventDefault();
+      event.stopPropagation();
     }
     if (this.activeMenuItemIndex === this.menuItems.length - 1) {
       this.activeMenuItemIndex = 0;
@@ -243,13 +244,14 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView
     }
   }
 
-  @HostListener('window:keydown.ArrowUp', ['$event'])
+  @HostListener('keydown.ArrowUp', ['$event'])
   public prevItem(event?: KeyboardEvent): void {
     if (!this._contextMenuService.isLeafMenu(this)) {
       return;
     }
     if (event) {
       event.preventDefault();
+      event.stopPropagation();
     }
     if (this.activeMenuItemIndex <= 0) {
       this.activeMenuItemIndex = this.menuItems.length - 1;
@@ -262,13 +264,14 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView
     }
   }
 
-  @HostListener('window:keydown.ArrowRight', ['$event'])
+  @HostListener('keydown.ArrowRight', ['$event'])
   public keyboardOpenSubMenu(event?: KeyboardEvent): void {
     if (!this._contextMenuService.isLeafMenu(this)) {
       return;
     }
     if (event) {
       event.preventDefault();
+      event.stopPropagation();
     }
     if (this.activeMenuItemIndex >= 0) {
       const menuItem = this.menuItems[this.activeMenuItemIndex];
@@ -277,14 +280,15 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView
     }
   }
 
-  @HostListener('window:keydown.Enter', ['$event'])
-  @HostListener('window:keydown.Space', ['$event'])
+  @HostListener('keydown.Enter', ['$event'])
+  @HostListener('keydown.Space', ['$event'])
   public keyboardMenuItemSelect(event?: KeyboardEvent): void {
     if (!this._contextMenuService.isLeafMenu(this)) {
       return;
     }
     if (event) {
       event.preventDefault();
+      event.stopPropagation();
     }
     if (this.activeMenuItemIndex >= 0) {
       const menuItem = this.menuItems[this.activeMenuItemIndex];