Skip to content

Commit

Permalink
fix: Disabled elements being clickable (#28807)
Browse files Browse the repository at this point in the history
* 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 <bglesias@gmail.com>

* Update packages/driver/cypress/e2e/commands/actions/click.cy.js

Co-authored-by: Bill Glesias <bglesias@gmail.com>

* Update packages/driver/src/cy/mouse.ts

Co-authored-by: Bill Glesias <bglesias@gmail.com>

* Update packages/driver/src/cy/mouse.ts

Co-authored-by: Bill Glesias <bglesias@gmail.com>

* 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 <bglesias@gmail.com>

* Update cli/CHANGELOG.md

Co-authored-by: Bill Glesias <bglesias@gmail.com>

* 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 <bglesias@gmail.com>
Co-authored-by: Jennifer Shehane <jennifer@cypress.io>
Co-authored-by: Cacie Prins <cacieprins@users.noreply.github.com>
  • Loading branch information
4 people committed Feb 27, 2024
1 parent 3e5fabc commit 5d42406
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 0 deletions.
1 change: 1 addition & 0 deletions cli/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
24 changes: 24 additions & 0 deletions packages/driver/cypress/e2e/commands/actions/click.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>')
Expand Down
15 changes: 15 additions & 0 deletions packages/driver/src/cy/mouse.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down

5 comments on commit 5d42406

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 5d42406 Feb 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the linux x64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.6.7/linux-x64/develop-5d42406610295e0c4f7033c943bcbe44fa675f08/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 5d42406 Feb 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the linux arm64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.6.7/linux-arm64/develop-5d42406610295e0c4f7033c943bcbe44fa675f08/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 5d42406 Feb 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the darwin x64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.6.7/darwin-x64/develop-5d42406610295e0c4f7033c943bcbe44fa675f08/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 5d42406 Feb 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the darwin arm64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.6.7/darwin-arm64/develop-5d42406610295e0c4f7033c943bcbe44fa675f08/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 5d42406 Feb 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the win32 x64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/13.6.7/win32-x64/develop-5d42406610295e0c4f7033c943bcbe44fa675f08/cypress.tgz

Please sign in to comment.