fix: fixing issue with blurring shadow dom elements (#29125)

cli/CHANGELOG.md

@@ -3,6 +3,10 @@
 
 _Released 3/26/2024 (PENDING)_
 
+**Bugfixes:**
+
+- Fixed an issue blurring shadow dom elements. Fixed in [#29125](https://github.com/cypress-io/cypress/pull/29125).
+
 **Dependency Updates:**
 
 - Updated jose from `4.11.2` to `4.15.5`. Addressed in [#29086](https://github.com/cypress-io/cypress/pull/29086).

packages/driver/cypress/e2e/commands/actions/focus.cy.js

@@ -202,6 +202,19 @@ describe('src/cy/commands/actions/focus', () => {
       })
     })
 
+    it('can focus element in nested shadow dom', () => {
+      const onFocus = cy.stub()
+
+      cy.visit('/fixtures/shadow-dom.html')
+      cy.get('.shadow-5 + input', { includeShadowDom: true }).as('shadow-input').then(($el) => {
+        $el.on('focus', onFocus)
+      })
+
+      cy.get('@shadow-input').focus().then(() => {
+        expect(onFocus).to.be.calledOnce
+      })
+    })
+
     describe('assertion verification', () => {
       beforeEach(function () {
         cy.on('log:added', (attrs, log) => {
@@ -673,7 +686,7 @@ describe('src/cy/commands/actions/focus', () => {
       })
     })
 
-    it('can focus svg elements', () => {
+    it('can blur svg elements', () => {
       const onBlur = cy.stub()
 
       cy.$$('[data-cy=rect]').blur(onBlur)
@@ -683,6 +696,19 @@ describe('src/cy/commands/actions/focus', () => {
       })
     })
 
+    it('can blur element in nested shadow dom', () => {
+      const onBlur = cy.stub()
+
+      cy.visit('/fixtures/shadow-dom.html')
+      cy.get('.shadow-5 + input', { includeShadowDom: true }).as('shadow-input').then(($el) => {
+        $el.on('blur', onBlur).get(0).focus()
+      })
+
+      cy.get('@shadow-input').blur().then(() => {
+        expect(onBlur).to.be.calledOnce
+      })
+    })
+
     describe('assertion verification', () => {
       beforeEach(function () {
         cy.on('log:added', (attrs, log) => {

packages/driver/src/cy/focused.ts

@@ -242,19 +242,19 @@ export const create = (state: StateFunc) => ({
   needsFocus ($elToFocus, $previouslyFocusedEl) {
     const $focused = this.getFocused()
 
-    // if we dont have a focused element
+    // if we don't have a focused element
     // we know we want to fire a focus event
     if (!$focused) {
       return true
     }
 
-    // if we didnt have a previously focused el
+    // if we didn't have a previously focused el
     // then always return true
     if (!$previouslyFocusedEl) {
       return true
     }
 
-    // if we are attemping to focus a differnet element
+    // if we are attempting to focus a different element
     // than the one we currently have, we know we want
     // to fire a focus event
     if ($focused.get(0) !== $elToFocus.get(0)) {
@@ -273,11 +273,16 @@ export const create = (state: StateFunc) => ({
     return false
   },
 
-  getFocused (document = state('document')) {
+  getFocused (document: Document | ShadowRoot | undefined = state('document')) {
     if (document) {
       const { activeElement } = document
 
       if ($dom.isFocused(activeElement)) {
+        // if the active element is a shadow root, we need to recursively get the active element of the shadow root
+        if (activeElement?.shadowRoot && activeElement.shadowRoot.activeElement) {
+          return this.getFocused(activeElement.shadowRoot)
+        }
+
         return $dom.wrap(activeElement)
       }
     }