fix: text events propagate out of shadow root. (#19132)

cypress-io · Dec 2, 2021 · f85c736 · f85c736 · cypress-bot · Dec 2, 2021
1 parent 6b19381
commit f85c736
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 0 deletions.
diff --git a/packages/driver/cypress/fixtures/shadow-dom-type.html b/packages/driver/cypress/fixtures/shadow-dom-type.html
@@ -0,0 +1,25 @@
+<html>
+  <body>
+    <test-element id="element"></test-element>
+    <div id="result"></div>
+  </body>
+  <script>
+    class TestElement extends HTMLElement {
+      constructor() {
+        super();
+        this._shadow = this.attachShadow({mode: "open"});
+
+        const input = document.createElement("input");
+        this._shadow.appendChild(input);
+      }
+    }
+
+    customElements.define("test-element", TestElement);
+
+    const el = document.getElementById("element");
+
+    el.addEventListener('keydown', () =>{
+      document.getElementById('result').innerText = 'typed'
+    })
+  </script>
+</html>
diff --git a/packages/driver/cypress/integration/commands/actions/type_spec.js b/packages/driver/cypress/integration/commands/actions/type_spec.js
@@ -3592,5 +3592,16 @@ describe('src/cy/commands/actions/type - #type', () => {
       .find('input', { includeShadowDom: true })
       .type('foo')
     })
+
+    // https://github.com/cypress-io/cypress/issues/17531
+    it('text events propagate out of shadow root', () => {
+      cy.visit('fixtures/shadow-dom-type.html')
+
+      cy
+      .get('test-element').shadow()
+      .find('input').type('asdf')
+
+      cy.get('#result').should('have.text', 'typed')
+    })
   })
 })
diff --git a/packages/driver/src/cy/keyboard.ts b/packages/driver/src/cy/keyboard.ts
@@ -960,6 +960,9 @@ export class Keyboard {
       ..._.omitBy(
         {
           bubbles: true,
+          // allow propagation out of root of shadow-dom
+          // https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
+          composed: true,
           cancelable,
           key,
           code,