fix: Update .type(' ') to not emit clicks when the keyup event has been prevented (#20156)

* fix: Update `.type(' ')` to not emit clicks when the keyup event has been prevented

* cleanup test for click event not firing while preventing default

Co-authored-by: Brian Mann <[email protected]>

Author: tbiethman

packages/driver/cypress/fixtures/click-event-by-type.html

@@ -66,10 +66,10 @@
         target.addEventListener("click", () => {
           updateLog("click");
         });
-        target.addEventListener("keyup", () => {
+        target.addEventListener("keyup", (event) => {
           updateLog("keyup");
         });
       });
     </script>
   </body>
-</html>
+</html>

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

@@ -574,8 +574,7 @@ describe('src/cy/commands/actions/type - #type', () => {
 
       targets.forEach((targetId) => {
         it(`${targetId}`, () => {
-          cy.get(`#target-${targetId}`).focus()
-          cy.get(`#target-${targetId}`).type('{enter}')
+          cy.get(`#target-${targetId}`).focus().type('{enter}')
 
           cy.get('li').eq(0).should('have.text', 'keydown')
           cy.get('li').eq(1).should('have.text', 'keypress')
@@ -593,8 +592,7 @@ describe('src/cy/commands/actions/type - #type', () => {
 
       targets.forEach((targetId) => {
         it(`${targetId}`, () => {
-          cy.get(`#target-${targetId}`).focus()
-          cy.get(`#target-${targetId}`).type('{enter}')
+          cy.get(`#target-${targetId}`).focus().type('{enter}')
 
           cy.get('li').eq(0).should('have.text', 'keydown')
           cy.get('li').eq(1).should('have.text', 'keypress')
@@ -610,17 +608,30 @@ describe('src/cy/commands/actions/type - #type', () => {
     })
 
     const targets = [
-      'button-tag',
-      'input-button',
-      'input-image',
-      'input-reset',
-      'input-submit',
+      '#target-button-tag',
+      '#target-input-button',
+      '#target-input-image',
+      '#target-input-reset',
+      '#target-input-submit',
     ]
 
     describe(`triggers with single space`, () => {
-      targets.forEach((targetId) => {
-        it(targetId, () => {
-          cy.get(`#target-${targetId}`).focus().type(' ')
+      targets.forEach((target) => {
+        it(target, () => {
+          const events = []
+
+          $(target).on('keydown keypress keyup click', (evt) => {
+            events.push(evt.type)
+          })
+
+          cy.get(target).focus().type(' ').then(() => {
+            expect(events).to.deep.eq([
+              'keydown',
+              'keypress',
+              'keyup',
+              'click',
+            ])
+          })
 
           cy.get('li').eq(0).should('have.text', 'keydown')
           cy.get('li').eq(1).should('have.text', 'keypress')
@@ -630,10 +641,61 @@ describe('src/cy/commands/actions/type - #type', () => {
       })
     })
 
+    describe(`does not trigger if keyup prevented`, () => {
+      targets.forEach((target) => {
+        it(`${target} does not fire click event`, () => {
+          const events = []
+
+          $(target)
+          .on('keydown keypress keyup click', (evt) => {
+            events.push(evt.type)
+          })
+          .on('keyup', (evt) => {
+            evt.preventDefault()
+          })
+
+          cy.get(target).focus().type(' ').then(() => {
+            expect(events).to.deep.eq([
+              'keydown',
+              'keypress',
+              'keyup',
+            ])
+          })
+
+          cy.get('li').should('have.length', 3)
+          cy.get('li').eq(0).should('have.text', 'keydown')
+          cy.get('li').eq(1).should('have.text', 'keypress')
+          cy.get('li').eq(2).should('have.text', 'keyup')
+        })
+      })
+    })
+
     describe('triggers after other characters', () => {
-      targets.forEach((targetId) => {
-        it(targetId, () => {
-          cy.get(`#target-${targetId}`).focus().type('asd ')
+      targets.forEach((target) => {
+        it(target, () => {
+          const events = []
+
+          $(target).on('keydown keypress keyup click', (evt) => {
+            events.push(evt.type)
+          })
+
+          cy.get(target).focus().type('asd ').then(() => {
+            expect(events).to.deep.eq([
+              'keydown',
+              'keypress',
+              'keyup',
+              'keydown',
+              'keypress',
+              'keyup',
+              'keydown',
+              'keypress',
+              'keyup',
+              'keydown',
+              'keypress',
+              'keyup',
+              'click',
+            ])
+          })
 
           cy.get('li').eq(12).should('have.text', 'click')
         })

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

@@ -342,7 +342,9 @@ export default function (Commands, Cypress, cy, state, config) {
             // event.target is null when used with shadow DOM.
             (event.target && $elements.isButtonLike(event.target)) &&
             // When a space key is pressed for input radio elements, the click event is only fired when it's not checked.
-            !(event.target.tagName === 'INPUT' && event.target.type === 'radio' && event.target.checked === true)
+            !(event.target.tagName === 'INPUT' && event.target.type === 'radio' && event.target.checked === true) &&
+            // When event is prevented, the click event should not be emitted
+            !event.defaultPrevented
           ) {
             fireClickEvent(event.target)
           }