fix: make clicks on type('{enter}') composed (#26395)

* fix: make clicks on type('{enter}') composed

Co-authored-by: Mike Plummer <mike-plummer@users.noreply.github.com>

* disable failing type_events driver tests from running in Webkit

* make sure done is only called once

* use test configuration to disable on webkit

* fix changelog

* Update cli/CHANGELOG.md

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

---------

Co-authored-by: Adam Stone-Lord <adams@cypress.io>
Co-authored-by: Mike Plummer <mike-plummer@users.noreply.github.com>
Co-authored-by: Emily Rohrbough <emilyrohrbough@users.noreply.github.com>
Co-authored-by: Ben M <benm@cypress.io>

cli/CHANGELOG.md

@@ -9,6 +9,7 @@ _Released 04/11/2023 (PENDING)_
  - Fixed an issue in the onboarding wizard where project framework & bundler would not be auto-detected when opening directly into component testing mode using the `--component` CLI flag. Fixes [#22777](https://github.com/cypress-io/cypress/issues/22777).
  - Updated to use the `SEMAPHORE_GIT_WORKING_BRANCH` [Semphore](https://docs.semaphoreci.com) CI environment variable to correctly associate a Cloud run to the current branch. Previously this was incorrectly associating a run to the target branch. Fixes [#26309](https://github.com/cypress-io/cypress/issues/26309).
  - Fix an edge case in Component Testing where a custom `baseUrl` in `tsconfig.json` for Next.js 13.2.0+ is not respected. This was partially fixed in [#26005](https://github.com/cypress-io/cypress/pull/26005), but an edge case was missed. Fixes [#25951](https://github.com/cypress-io/cypress/issues/25951).
+ - Fixed an issue where `click` events fired on `.type('{enter}')` did not propagate through shadow roots. Fixes [#26392](https://github.com/cypress-io/cypress/issues/26392).
 
 **Misc:**
 

packages/driver/cypress/e2e/commands/actions/type_events_spec.js → packages/driver/cypress/e2e/commands/actions/type_events.cy.js

@@ -93,7 +93,8 @@ describe('src/cy/commands/actions/type - #type events', () => {
       cy.get(':text:first').type('a')
     })
 
-    it('receives textInput event', (done) => {
+    // TODO fix this test in Webkit https://github.com/cypress-io/cypress/issues/26438
+    it('receives textInput event', { browser: '!webkit' }, (done) => {
       const $txt = cy.$$(':text:first')
 
       $txt[0].addEventListener('textInput', (e) => {
@@ -593,7 +594,8 @@ describe('src/cy/commands/actions/type - #type events', () => {
       ]
 
       targets.forEach((target) => {
-        it(target, () => {
+        // TODO fix this test in Webkit https://github.com/cypress-io/cypress/issues/26438
+        it(target, { browser: '!webkit' }, () => {
           cy.get(`#target-${target}`).focus().type('{enter}')
 
           cy.get('li').should('have.length', 4)
@@ -606,7 +608,8 @@ describe('src/cy/commands/actions/type - #type events', () => {
 
       describe('keydown triggered on another element', () => {
         targets.forEach((target) => {
-          it(target, () => {
+          // TODO fix this test in Webkit https://github.com/cypress-io/cypress/issues/26438
+          it(target, { browser: '!webkit' }, () => {
             cy.get('#focus-options').select(target)
             cy.get('#input-text').focus().type('{enter}')
 
@@ -649,6 +652,19 @@ describe('src/cy/commands/actions/type - #type events', () => {
         })
       })
     })
+
+    describe('shadow dom', () => {
+      // https://github.com/cypress-io/cypress/issues/26392
+      it('propagates through shadow roots', () => {
+        cy.visit('fixtures/shadow-dom-button.html')
+
+        cy.get('cy-test-element').invoke('on', 'click', cy.spy().as('clickSpy'))
+
+        cy.get('cy-test-element').shadow().find('button').focus().type('{enter}')
+
+        cy.get('@clickSpy').should('have.been.called')
+      })
+    })
   })
 
   describe(`type(' ') fires click event on button-like elements`, () => {

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

@@ -294,7 +294,7 @@ export default function (Commands, Cypress, cy, state, config) {
 
       const fireClickEvent = (el) => {
         const ctor = $dom.getDocumentFromElement(el).defaultView!.PointerEvent
-        const event = new ctor('click')
+        const event = new ctor('click', { composed: true })
 
         el.dispatchEvent(event)
       }