From e7afc7e115a009397adeae31ee1729cac4d8b79c Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Tue, 12 Mar 2024 14:29:56 -0600
Subject: [PATCH 1/2] fixing issue with blurring shadow dom element

---
 .../cypress/e2e/commands/actions/focus.cy.js  | 28 ++++++++++++++++++-
 packages/driver/src/cy/focused.ts             | 13 ++++++---
 yarn.lock                                     |  7 +----
 3 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/packages/driver/cypress/e2e/commands/actions/focus.cy.js b/packages/driver/cypress/e2e/commands/actions/focus.cy.js
index 2fc0d830e206..d718e1cba5ff 100644
--- a/packages/driver/cypress/e2e/commands/actions/focus.cy.js
+++ b/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) => {
diff --git a/packages/driver/src/cy/focused.ts b/packages/driver/src/cy/focused.ts
index 7ce40ba9863d..85edd76541eb 100644
--- a/packages/driver/src/cy/focused.ts
+++ b/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)
       }
     }
diff --git a/yarn.lock b/yarn.lock
index f02eb247e263..dd3b2b97f5ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -29361,12 +29361,7 @@ tiny-relative-date@^1.3.0:
   resolved "https://registry.yarnpkg.com/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz#fa08aad501ed730f31cc043181d995c39a935e07"
   integrity sha512-MOQHpzllWxDCHHaDno30hhLfbouoYlOI8YlMNtvKe1zXbjEVhbcEovQxvZrPvtiYW630GQDoMMarCnjfyfHA+A==
 
-tinycolor2@^1.1.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
-  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
-
-tinycolor2@^1.6.0:
+tinycolor2@^1.1.2, tinycolor2@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
   integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==

From 2fb227d541b8bf805fa2b06a02e6bf5ba36895c3 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Wed, 13 Mar 2024 08:42:44 -0600
Subject: [PATCH 2/2] updating changelog

---
 cli/CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index 422b2ae6ec95..febf6235a701 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,4 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 13.7.1
+
+_Released 3/26/2024 (PENDING)_
+
+**Bugfixes:**
+
+- Fixed an issue blurring shadow dom elements. Fixed in [#29125](/~https://github.com/cypress-io/cypress/pull/29125).
+
 ## 13.7.0
 
 _Released 3/12/2024 (PENDING)_