fix: Disabled elements being clickable (#28807)

* fixes #28788 -- mouse.ts logic If mouseUp element or mouseDown element or commonAncestor element is :disabled, click event should be prevented * fixes #28788 -- e2e test tests that no click events are registered when click happens on child of disabled element * fixes #28788 -- mouse.ts logic If mouseUp element or mouseDown element have an "actually disabled" parent, the click event should not be registered * refactoring: minor name changes for readability * fixes #24322 --added changelog entry * Update packages/driver/src/cy/mouse.ts Co-authored-by: Bill Glesias <[email protected]> * Update packages/driver/cypress/e2e/commands/actions/click.cy.js Co-authored-by: Bill Glesias <[email protected]> * Update packages/driver/src/cy/mouse.ts Co-authored-by: Bill Glesias <[email protected]> * Update packages/driver/src/cy/mouse.ts Co-authored-by: Bill Glesias <[email protected]> * update mouse.ts -- unexpected token * docs: moved entry to 13.6.5 * Update CHANGELOG.md * Update CHANGELOG.md * Update packages/driver/cypress/e2e/commands/actions/click.cy.js Co-authored-by: Bill Glesias <[email protected]> * Update cli/CHANGELOG.md Co-authored-by: Bill Glesias <[email protected]> * lint: fixed 2 linting errors 565:1 error Expected indentation of 8 spaces but found 10 indent 567:7 error Expected blank line before this statement padding-line-between-statements * style: removed trailing space 567:1 error Trailing spaces not allowed no-trailing-spaces * Update CHANGELOG.md --------- Co-authored-by: Bill Glesias <[email protected]> Co-authored-by: Jennifer Shehane <[email protected]> Co-authored-by: Cacie Prins <[email protected]>
cypress-io · Feb 27, 2024 · 5d42406 · 5d42406 · cypress-bot · Feb 27, 2024
1 parent 3e5fabc
commit 5d42406
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 0 deletions.
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -5,6 +5,7 @@ _Released 2/27/2024 (PENDING)_
 
 **Bugfixes:**
 
+- Fixed an issue where `.click()` commands on children of disabled elements would still produce "click" events -- even without `{ force: true }`. Fixes [#28788](https://github.com/cypress-io/cypress/issues/28788).
 - Changed RequestBody type to allow for boolean and null literals to be passed as body values. [#28789](https://github.com/cypress-io/cypress/issues/28789)
 
 ## 13.6.6

diff --git a/packages/driver/cypress/e2e/commands/actions/click.cy.js b/packages/driver/cypress/e2e/commands/actions/click.cy.js
@@ -546,6 +546,30 @@ describe('src/cy/commands/actions/click', () => {
       cy.getAll('span2', 'focus click mousedown').each(shouldNotBeCalled)
     })
 
+    // https://github.com/cypress-io/cypress/issues/28788
+    it('no click when element is disabled', () => {
+      const btn = cy.$$('button:first')
+      const span = $('<span>foooo</span>')
+
+      attachFocusListeners({ btn, span })
+      attachMouseClickListeners({ btn, span })
+      attachMouseHoverListeners({ btn, span })
+
+      btn.html('')
+      btn.attr('disabled', true)
+      btn.append(span)
+
+      cy.get('button:first span').click()
+
+      if (Cypress.browser.name === 'chrome') {
+        cy.getAll('btn', 'mouseenter mousedown mouseup').each(shouldBeCalled)
+      }
+
+      cy.getAll('btn', 'focus click').each(shouldNotBeCalled)
+      cy.getAll('span', 'mouseenter mousedown mouseup').each(shouldBeCalled)
+      cy.getAll('span', 'focus click').each(shouldNotBeCalled)
+    })
+
     it('no click when new element at coords is not ancestor', () => {
       const btn = cy.$$('button:first')
       const span1 = $('<span>foooo</span>')

diff --git a/packages/driver/src/cy/mouse.ts b/packages/driver/src/cy/mouse.ts
@@ -567,6 +567,21 @@ export const create = (state: StateFunc, keyboard: Keyboard, focused: IFocused,
           return { skipClickEventReason: 'element was detached' }
         }
 
+        // Only send click event if element is not disabled.
+        // First find an parent element that can actually be disabled
+        const findParentThatCanBeDisabled = (el: HTMLElement): HTMLElement | null => {
+          const elementsThatCanBeDisabled = ['button', 'input', 'select', 'textarea', 'optgroup', 'option', 'fieldset']
+
+          return elementsThatCanBeDisabled.includes($elements.getTagName(el)) ? el : null
+        }
+
+        const parentThatCanBeDisabled = $elements.findParent(mouseUpPhase.targetEl, findParentThatCanBeDisabled) || $elements.findParent(mouseDownPhase.targetEl, findParentThatCanBeDisabled)
+
+        // Then check if parent is indeed disabled
+        if (parentThatCanBeDisabled !== null && $elements.isDisabled($(parentThatCanBeDisabled))) {
+          return { skipClickEventReason: 'element was disabled' }
+        }
+
         const commonAncestor = mouseUpPhase.targetEl &&
         mouseDownPhase.targetEl &&
         $elements.getFirstCommonAncestor(mouseUpPhase.targetEl, mouseDownPhase.targetEl)