Merge pull request #192 from antidis/antidis/fix-keyboard-shortcuts-error

Prevent keyboard shortcuts from running when the document's active element is a form element

Author: pzuraq

addon/components/docs-keyboard-shortcuts/component.js

@@ -4,13 +4,15 @@ import { later } from "@ember/runloop";
 import layout from './template';
 import { EKMixin, keyUp } from 'ember-keyboard';
 import { inject as service } from '@ember/service';
+import { formElementHasFocus } from '../../keyboard-config';
 
 /**
   A component that enables keyboard shortcuts. Press '?' to toggle the keyboard shortcuts dialog.
 
   @class DocsKeyboardShortcuts
   @public
 */
+
 export default Component.extend(EKMixin, {
   layout,
 
@@ -23,26 +25,34 @@ export default Component.extend(EKMixin, {
   }),
 
   goto: on(keyUp('KeyG'), function() {
-    this.set('isGoingTo', true);
-    later(() => {
-      this.set('isGoingTo', false);
-    }, 500);
+    if (!formElementHasFocus()) {
+      this.set('isGoingTo', true);
+      later(() => {
+        this.set('isGoingTo', false);
+      }, 500);
+    }
   }),
 
   gotoDocs: on(keyUp('KeyD'), function() {
-    if (this.get('isGoingTo')) {
-      this.get('router').transitionTo('docs');
+    if (!formElementHasFocus()) {
+      if (this.get('isGoingTo')) {
+        this.get('router').transitionTo('docs');
+      }
     }
   }),
 
   gotoHome: on(keyUp('KeyH'), function() {
-    if (this.get('isGoingTo')) {
-      this.get('router').transitionTo('index');
+    if (!formElementHasFocus()) {
+      if (this.get('isGoingTo')) {
+        this.get('router').transitionTo('index');
+      }
     }
   }),
 
   toggleKeyboardShortcuts: on(keyUp('shift+Slash'), function() {
-    this.toggleProperty('isShowingKeyboardShortcuts');
+    if (!formElementHasFocus()) {
+      this.toggleProperty('isShowingKeyboardShortcuts');
+    }
   }),
 
   actions: {

addon/components/docs-viewer/component.js

@@ -3,6 +3,7 @@ import Component from '@ember/component';
 import layout from './template';
 import { EKMixin, keyDown } from 'ember-keyboard';
 import { on } from '@ember/object/evented';
+import { formElementHasFocus } from '../../keyboard-config';
 
 /**
   The main docs viewer component for Ember-CLI addon docs. This component must be placed
@@ -30,6 +31,7 @@ import { on } from '@ember/object/evented';
   @yield {Component} viewer.main
   @public
 */
+
 export default Component.extend(EKMixin, {
   layout,
   docsRoutes: service(),
@@ -53,18 +55,19 @@ export default Component.extend(EKMixin, {
   },
 
   nextPage: on(keyDown('KeyJ'), keyDown('ArrowRight'), function() {
-    if (this.searchIsNotFocused() && this.get('docsRoutes.next')) {
-      this.get('router').transitionTo(...this.get('docsRoutes.next.route'));
+    if (!formElementHasFocus()) {
+      if (this.get('docsRoutes.next')) {
+        this.get('router').transitionTo(...this.get('docsRoutes.next.route'));
+      }
     }
   }),
 
   previousPage: on(keyDown('KeyK'), keyDown('ArrowLeft'), function() {
-    if (this.searchIsNotFocused() && this.get('docsRoutes.previous')) {
-      this.get('router').transitionTo(...this.get('docsRoutes.previous.route'));
+    if (!formElementHasFocus()) {
+      if (this.get('docsRoutes.previous')) {
+        this.get('router').transitionTo(...this.get('docsRoutes.previous.route'));
+      }
     }
   }),
 
-  searchIsNotFocused() {
-    return !(document.querySelector('[data-search-box-input]') === document.activeElement);
-  }
 });

addon/controllers/application.js

@@ -3,6 +3,7 @@ import { EKMixin, keyUp } from 'ember-keyboard';
 import { inject as service } from '@ember/service';
 import { on } from '@ember/object/evented';
 import { later } from '@ember/runloop';
+import { formElementHasFocus } from '../keyboard-config';
 
 export default Controller.extend(EKMixin, {
 
@@ -15,26 +16,34 @@ export default Controller.extend(EKMixin, {
   }),
 
   goto: on(keyUp('KeyG'), function() {
-    this.set('isGoingTo', true);
-    later(() => {
-      this.set('isGoingTo', false);
-    }, 500);
+    if (!formElementHasFocus()) {
+      this.set('isGoingTo', true);
+      later(() => {
+        this.set('isGoingTo', false);
+      }, 500);
+    }
   }),
 
   gotoDocs: on(keyUp('KeyD'), function() {
-    if (this.get('isGoingTo')) {
-      this.get('router').transitionTo('docs');
+    if (!formElementHasFocus()) {
+      if (this.get('isGoingTo')) {
+        this.get('router').transitionTo('docs');
+      }
     }
   }),
 
   gotoHome: on(keyUp('KeyH'), function() {
-    if (this.get('isGoingTo')) {
-      this.get('router').transitionTo('index');
+    if (!formElementHasFocus()) {
+      if (this.get('isGoingTo')) {
+        this.get('router').transitionTo('index');
+      }
     }
   }),
 
   toggleKeyboardShortcuts: on(keyUp('shift+Slash'), function() {
-    this.toggleProperty('isShowingKeyboardShortcuts');
+    if (!formElementHasFocus()) {
+      this.toggleProperty('isShowingKeyboardShortcuts');
+    }
   }),
 
   actions: {

addon/keyboard-config.js

@@ -0,0 +1,5 @@
+const TAGNAMES_THAT_WHEN_FOCUSED_PREVENT_KEYBOARD_SHORTCUTS = [ 'INPUT', 'SELECT', 'TEXTAREA' ];
+
+export function formElementHasFocus() {
+  return TAGNAMES_THAT_WHEN_FOCUSED_PREVENT_KEYBOARD_SHORTCUTS.includes(document.activeElement.tagName);
+}