fix: make isFocusedOrInFocused check shadow roots (#26207)

* fix: make isFocusedOrInFocused check shadow roots

* Add item to changelog

* Get rid of unnecessary null checks

* Add e2e test for new scenario

* Make changelog item clearer

* Add a test for the type command as well

* Update type click test

* Fix typo

* Reuse shadow-dom-focus.html

* Update changelog item

Co-authored-by: Emily Rohrbough <emilyrohrbough@users.noreply.github.com>

* Remove shadow-dom-focus for shadow-dom-type

* Check if isWithinShadowRoot and use root node

* Fix potential error w/ getSelection
Because shadowRoots don't have a getSelection function

* Make doc a const again

* Update cli/CHANGELOG.md

---------

Co-authored-by: Emily Rohrbough <emilyrohrbough@users.noreply.github.com>

cli/CHANGELOG.md

@@ -10,8 +10,9 @@ _Released 03/28/2023 (PENDING)_
 **Bugfixes:**
 
  - Fixed a compatibility issue so that component test projects can use [Vite](https://vitejs.dev/) version 4.2.0 and greater. Fixes [#26138](https://github.com/cypress-io/cypress/issues/26138).
- - Changed the way that Git hashes are loaded so that non-relevant runs are excluded from the Debug page. Fixes [#26058](https://github.com/cypress-io/cypress/issues/26058).
  - Fixed an issue where [`cy.intercept()`](https://docs.cypress.io/api/commands/intercept) added an additional `content-length` header to spied requests that did not set a `content-length` header on the original request. Fixes [#24407](https://github.com/cypress-io/cypress/issues/24407).
+ - Changed the way that Git hashes are loaded so that non-relevant runs are excluded from the Debug page. Fixes [#26058](https://github.com/cypress-io/cypress/issues/26058).
+ - Corrected the [`.type()`](https://docs.cypress.io/api/commands/type) command to account for shadow root elements when determining whether or not focus needs to be simulated before typing. Fixes [#26198](https://github.com/cypress-io/cypress/issues/26198).
  - Fixed an issue where an incorrect working directory could be used for Git operations on Windows. Fixes [#23317](https://github.com/cypress-io/cypress/issues/23317).
 
 **Misc:**

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

@@ -3092,5 +3092,17 @@ describe('src/cy/commands/actions/type - #type', () => {
 
       cy.get('#result').should('have.text', 'typed')
     })
+
+    // https://github.com/cypress-io/cypress/issues/26198
+    it('type calls on elements in shadow dom do not fire click if the element already has focus', () => {
+      cy.visit('fixtures/shadow-dom-type.html')
+
+      cy.get('test-element').shadow().find('input').as('input')
+
+      cy.get('@input').invoke('on', 'click', cy.spy().as('clickSpy'))
+      cy.get('@input').focus().type('asdf')
+
+      cy.get('@clickSpy').should('not.have.been.called')
+    })
   })
 })

packages/driver/cypress/e2e/dom/elements.cy.ts

@@ -1,5 +1,5 @@
 import $elements from '../../../src/dom/elements'
-const { getActiveElByDocument, isFocused, elementFromPoint } = $elements
+const { getActiveElByDocument, isFocused, elementFromPoint, isFocusedOrInFocused } = $elements
 const $ = window.Cypress.$
 
 describe('src/dom/elements', () => {
@@ -321,4 +321,14 @@ describe('src/dom/elements', () => {
       expect(elementFromPoint(doc, 1, 2)).to.equal(shadowHostNode)
     })
   })
+
+  context('.isFocusedOrInFocused', () => {
+    it('should traverse shadow roots when determining if an element has focus', () => {
+      cy.visit('/fixtures/shadow-dom-type.html')
+
+      cy.get('test-element').shadow().find('input').focus().then(($input) => {
+        expect(isFocusedOrInFocused($input[0])).to.be.true
+      })
+    })
+  })
 })

packages/driver/src/dom/elements/complexElements.ts

@@ -139,14 +139,21 @@ export const isFocusable = ($el: JQuery<HTMLElement>) => {
 
 export const isFocusedOrInFocused = (el: HTMLElement) => {
   debug('isFocusedOrInFocus', el)
-
   const doc = $document.getDocumentFromElement(el)
 
   if (!doc.hasFocus()) {
     return false
   }
 
-  const { activeElement } = doc
+  let root: Document | ShadowRoot
+
+  if (isWithinShadowRoot(el)) {
+    root = el.getRootNode() as ShadowRoot
+  } else {
+    root = doc
+  }
+
+  let { activeElement } = root
 
   let elToCheckCurrentlyFocused