Merge pull request #578 from simonihmig/support-shadowdom

Support inputs in shadow DOM in disableOnInputFields mode

addon-test-support/key-event.js

@@ -4,7 +4,12 @@ import validMouseButtons from 'ember-keyboard/fixtures/mouse-buttons-array';
 import getCmdKey from 'ember-keyboard/utils/get-cmd-key';
 import { triggerEvent } from '@ember/test-helpers';
 
-export function keyEvent(keyCombo, type, element = document) {
+export function keyEvent(
+  keyCombo,
+  type,
+  element = document,
+  eventOptions = {}
+) {
   let keyComboParts = (keyCombo || '').split('+');
 
   let eventProps = keyComboParts.reduce((eventProps, keyComboPart) => {
@@ -30,5 +35,5 @@ export function keyEvent(keyCombo, type, element = document) {
     return eventProps;
   }, {});
 
-  return triggerEvent(element, type, eventProps);
+  return triggerEvent(element, type, { ...eventOptions, ...eventProps });
 }

addon-test-support/test-helpers.js

@@ -12,8 +12,8 @@ export function keyDown(keyCombo) {
   return keyEvent(keyCombo, 'keydown');
 }
 
-export function keyDownWithElement(keyCombo, element) {
-  return keyEvent(keyCombo, 'keydown', element);
+export function keyDownWithElement(keyCombo, element, eventOptions) {
+  return keyEvent(keyCombo, 'keydown', element, eventOptions);
 }
 
 export function keyUp(keyCombo) {

addon/services/keyboard.js

@@ -70,10 +70,10 @@ export default class KeyboardService extends Service {
   @action
   _respond(event) {
     if (this._disableOnInput && event.target) {
-      const tag = event.target.tagName;
+      const target = event.composedPath()[0] ?? event.target;
+      const tag = target.tagName;
       const isContentEditable =
-        event.target.getAttribute &&
-        event.target.getAttribute('contenteditable') != null;
+        target.getAttribute && target.getAttribute('contenteditable') != null;
       if (isContentEditable || tag === 'TEXTAREA' || tag === 'INPUT') {
         return;
       }

tests/acceptance/disable-on-input-fields-config-test.js

@@ -37,6 +37,21 @@ module('Acceptance | disableOnInputFields config', function (hooks) {
       assert.deepEqual(getValues(), [0, 0, 0], 'responders do not respond');
     });
 
+    test('test event does not propagate on input field in open shadow DOM', async function (assert) {
+      assert.expect(1);
+
+      await visit('/test-scenario');
+
+      const input = this.element
+        .querySelector('[data-test-shadow-dom]')
+        .shadowRoot.querySelector('input');
+
+      // trigger a "composed" event to make sure the event triggered within the shadow dom is able to traverse the shadow root boundary.
+      // this is only needed for the synthetic event we create here in tests, "real" events do this by default.
+      await keyDownWithElement('ArrowRight', input, { composed: true });
+      assert.deepEqual(getValues(), [0, 0, 0], 'responders do not respond');
+    });
+
     test('test standard functionality', async function (assert) {
       assert.expect(8);
 

tests/dummy/app/app.js

@@ -2,6 +2,7 @@ import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from 'dummy/config/environment';
+import './custom-elements/input-in-open-shadow';
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;

tests/dummy/app/custom-elements/input-in-open-shadow.js

@@ -0,0 +1,11 @@
+if (typeof FastBoot === 'undefined') {
+  class InputInOpenShadow extends HTMLElement {
+    async connectedCallback() {
+      const shadowRoot = this.attachShadow({ mode: 'open' });
+      const input = document.createElement('input');
+      shadowRoot.appendChild(input);
+    }
+  }
+
+  customElements.define('input-in-open-shadow', InputInOpenShadow);
+}

tests/dummy/app/templates/test-scenario/index.hbs

@@ -51,3 +51,5 @@
 
 <label for="data-test-input-field">input field</label>
 <input id="data-test-input-field" data-test-input-field/>
+
+<input-in-open-shadow data-test-shadow-dom/>