From e1276fd623ec22527d4066d6381c29cc214e9a48 Mon Sep 17 00:00:00 2001 From: David Barrett Date: Tue, 12 Jun 2018 11:23:50 +0100 Subject: [PATCH] Prevent keyboard shortcuts from running when the document's active element is a form element --- .../docs-keyboard-shortcuts/component.js | 28 +++++++++++++------ addon/components/docs-viewer/component.js | 17 ++++++----- addon/controllers/application.js | 27 ++++++++++++------ addon/keyboard-config.js | 5 ++++ 4 files changed, 52 insertions(+), 25 deletions(-) create mode 100644 addon/keyboard-config.js diff --git a/addon/components/docs-keyboard-shortcuts/component.js b/addon/components/docs-keyboard-shortcuts/component.js index bf4a7df67..1391ee125 100644 --- a/addon/components/docs-keyboard-shortcuts/component.js +++ b/addon/components/docs-keyboard-shortcuts/component.js @@ -4,6 +4,7 @@ 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. @@ -11,6 +12,7 @@ import { inject as service } from '@ember/service'; @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: { diff --git a/addon/components/docs-viewer/component.js b/addon/components/docs-viewer/component.js index 2f1b8aaaf..47b094cba 100644 --- a/addon/components/docs-viewer/component.js +++ b/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); - } }); diff --git a/addon/controllers/application.js b/addon/controllers/application.js index acc04075e..ed256f3c0 100644 --- a/addon/controllers/application.js +++ b/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: { diff --git a/addon/keyboard-config.js b/addon/keyboard-config.js new file mode 100644 index 000000000..eecc2dd82 --- /dev/null +++ b/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); +}