Fix typing into shadow dom inputs (#7847)

packages/driver/cypress/fixtures/shadow-dom.html

@@ -31,7 +31,7 @@
             const content = this.getAttribute('content')
             const className = this.hasAttribute('innerClass') ? this.getAttribute('innerClass') : 'shadow-content'
 
-            root.innerHTML = `<p class="${className}">${content}</p><slot></slot>`
+            root.innerHTML = `<p class="${className}">${content}</p><input /><slot></slot>`
           }
         })
       }

packages/driver/cypress/integration/commands/actions/type_spec.js

@@ -3066,4 +3066,18 @@ describe('src/cy/commands/actions/type - #type', () => {
       })
     })
   })
+
+  describe('shadow dom', () => {
+    beforeEach(() => {
+      cy.visit('/fixtures/shadow-dom.html')
+    })
+
+    // https://github.com/cypress-io/cypress/issues/7741
+    it('types into input', () => {
+      cy
+      .get('#shadow-element-1')
+      .find('input', { includeShadowDom: true })
+      .type('foo')
+    })
+  })
 })

packages/driver/cypress/integration/dom/elements_spec.ts

@@ -1,3 +1,5 @@
+import { getActiveElByDocument, isFocused } from '../../../src/dom/elements'
+
 const { $ } = Cypress
 
 export {}
@@ -169,4 +171,97 @@ describe('src/dom/elements', () => {
       expect(Cypress.dom.isUndefinedOrHTMLBodyDoc($el)).to.be.false
     })
   })
+
+  context('.getActiveElByDocument', () => {
+    beforeEach(() => {
+      cy.visit('/fixtures/active-elements.html')
+    })
+
+    it('returns active element by looking it up on document', () => {
+      cy.get('input:first').focus().then(($el) => {
+        expect(getActiveElByDocument($el)).to.equal($el[0])
+      })
+    })
+
+    it('returns null if element is not focused', () => {
+      cy.get('input:first').then(($el) => {
+        expect(getActiveElByDocument($el)).to.be.null
+      })
+    })
+
+    describe('in the shadow dom', () => {
+      beforeEach(() => {
+        cy.visit('/fixtures/shadow-dom.html')
+      })
+
+      it('returns active element for shadow dom by looking it up on shadow root', () => {
+        cy
+        .get('#shadow-element-1')
+        .find('input', { includeShadowDom: true }).focus().then(($el) => {
+          expect(getActiveElByDocument($el)).to.equal($el[0])
+        })
+      })
+    })
+  })
+
+  context('.isFocused', () => {
+    beforeEach(() => {
+      cy.visit('/fixtures/active-elements.html')
+    })
+
+    it('returns true if the element is the active element', () => {
+      cy.get('input:first').focus().then(($el) => {
+        expect(isFocused($el[0])).to.be.true
+      })
+    })
+
+    it('returns true if the active element is the body and it is contenteditable', () => {
+      cy.get('body').focus().then(($body) => {
+        $body[0].setAttribute('contenteditable', 'true')
+        expect(isFocused($body[0])).to.be.true
+      })
+    })
+
+    it('returns false if the element is not the active element', () => {
+      cy.get('input:first').then(($el) => {
+        expect(isFocused($el[0])).to.be.false
+      })
+    })
+
+    it('returns false if there is no active element', () => {
+      cy.get('input:first').focus().then(($el) => {
+        $el.blur()
+        expect(isFocused($el[0])).to.be.false
+      })
+    })
+
+    it('returns false if the active element is the body', () => {
+      cy.get('body').focus().then(($body) => {
+        expect(isFocused($body[0])).to.be.false
+      })
+    })
+
+    it('returns false if determining the active element errors', () => {
+      cy.get('input:first').focus().then(($el) => {
+        Object.defineProperty($el[0].ownerDocument, 'activeElement', {
+          get () {
+            throw new Error('unexpected error')
+          },
+        })
+
+        expect(isFocused($el[0])).to.be.false
+      })
+    })
+
+    describe('in the shadow dom', () => {
+      it('returns true if the element is the active element of the shadow root', () => {
+        cy.visit('/fixtures/shadow-dom.html')
+        cy
+        .get('#shadow-element-1')
+        .find('input', { includeShadowDom: true }).focus().then(($el) => {
+          expect(isFocused($el[0])).to.be.true
+        })
+      })
+    })
+  })
 })

packages/driver/src/cy/commands/actions/type.js

@@ -409,7 +409,9 @@ module.exports = function (Commands, Cypress, cy, state, config) {
             errorOnSelect: false,
           })
           .then(() => {
-            if (!options.force && $elements.getActiveElByDocument($elToClick[0].ownerDocument) === null) {
+            let activeElement = $elements.getActiveElByDocument($elToClick)
+
+            if (!options.force && activeElement === null) {
               const node = $dom.stringify($elToClick)
               const onFail = options._log
 

packages/driver/src/cy/keyboard.ts

@@ -672,7 +672,7 @@ export class Keyboard {
         return options.$el.get(0)
       }
 
-      const activeEl = $elements.getActiveElByDocument(doc) || doc.body
+      const activeEl = $elements.getActiveElByDocument(options.$el) || doc.body
 
       return activeEl
     }
@@ -1098,7 +1098,7 @@ export class Keyboard {
 
     const doc = $document.getDocumentFromElement(el)
 
-    return $elements.getActiveElByDocument(doc) || doc.body
+    return $elements.getActiveElByDocument(options.$el) || doc.body
   }
 
   performSimulatedDefault (el: HTMLElement, key: KeyDetails, options: any) {

packages/driver/src/dom/elements.ts

@@ -417,7 +417,13 @@ const activeElementIsDefault = (activeElement, body: HTMLElement) => {
 
 const isFocused = (el) => {
   try {
-    const doc = $document.getDocumentFromElement(el)
+    let doc
+
+    if (Cypress.config('experimentalShadowDomSupport') && isWithinShadowRoot(el)) {
+      doc = el.getRootNode()
+    } else {
+      doc = $document.getDocumentFromElement(el)
+    }
 
     const { activeElement, body } = doc
 
@@ -598,11 +604,7 @@ const getFirstCommonAncestor = (el1, el2) => {
 }
 
 const isWithinShadowRoot = (node: HTMLElement) => {
-  const win = $window.getWindowByElement(node)
-
-  if (!win) return false
-
-  return node.getRootNode() instanceof win.ShadowRoot
+  return node.getRootNode().toString() === '[object ShadowRoot]'
 }
 
 const getParent = (el) => {
@@ -931,8 +933,15 @@ const getFirstFocusableEl = ($el: JQuery<HTMLElement>) => {
 
   return getFirstFocusableEl($el.parent())
 }
-const getActiveElByDocument = (doc: Document): HTMLElement | null => {
-  const activeElement = getNativeProp(doc, 'activeElement')
+
+const getActiveElByDocument = ($el: JQuery<HTMLElement>): HTMLElement | null => {
+  let activeElement
+
+  if (Cypress.config('experimentalShadowDomSupport') && isWithinShadowRoot($el[0])) {
+    activeElement = ($el[0].getRootNode() as ShadowRoot).activeElement
+  } else {
+    activeElement = getNativeProp($el[0].ownerDocument as Document, 'activeElement')
+  }
 
   if (isFocused(activeElement)) {
     return activeElement as HTMLElement