Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: send click event with cy.type('{enter}'). #19726

Merged
merged 2 commits into from Jan 31, 2022
Merged

fix: send click event with cy.type('{enter}'). #19726

merged 2 commits into from Jan 31, 2022

Conversation

sainthkh
Copy link
Contributor

User facing changelog

Send click event with cy.type('{enter}') on some button-like elements(<button> element, button, reset, image, submit input elements)

Additional details

  • Why was this change necessary? => Cypress doesn't reflect the browser behavior.
  • What is affected by this change? => N/A
  • Any implementation details to explain? => Click event is programatically sent on Chrome only. Firefox automatically sends click events.

How has the user experience changed?

Before: click event is not sent.
After: click event is sent.

PR Tasks

  • Have tests been added/updated?
  • [na] Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
  • [na] Has a PR for user-facing changes been opened in cypress-documentation?
  • [na] Have API changes been updated in the type definitions?
  • [na] Have new configuration options been added to the cypress.schema.json?

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Jan 17, 2022

Thanks for taking the time to open a PR!

@sainthkh sainthkh marked this pull request as ready for review January 17, 2022 03:01
@sainthkh sainthkh requested a review from a team as a code owner January 17, 2022 03:01
@sainthkh sainthkh requested review from mschile and removed request for a team January 17, 2022 03:01
@mschile mschile requested review from jennifer-shehane and removed request for mschile January 18, 2022 21:01
BlueWinds
BlueWinds suggested changes Jan 24, 2022
View reviewed changes
packages/driver/cypress/integration/commands/actions/type_spec.js Outdated Show resolved Hide resolved
packages/driver/src/cy/commands/actions/type.ts Outdated
// click event is only fired on button, image, submit, reset elements.
// That's why we cannot use $elements.isButtonLike() here.
const type = (type) => $elements.isInputType(options.$el.get(0), type)
const isButtonLike = type('button') || type('image') || type('submit') || type('reset')
Copy link
Contributor

Choose a reason for hiding this comment

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

Since we're not using $elements.isButtonLike(), let's pick a different name. sendClickEvent perhaps? Then the conditional later reads very cleanly - if (sendClickEvent && !Cypress.isBrowser('firefox')).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think sendClickEvent is good enough.

@jamime
Copy link

jamime commented Jan 25, 2022 •
edited

Thanks for working on this issue. I wanted to note that this issue also exists for type{' '}.

The events should fire in a slightly different order

  • keydown
  • keypress
  • keyup
  • click

It's also important if the target changes i.e. calling .focus() in the keydown event the click event is triggered on the new target.

I can create this in a new issue if you would prefer?

@sainthkh
Copy link
Contributor Author

@jamime I think there are 2 more requests in your comment.

  • Support cy.type(' ').
  • Support calling element.focus() on keydown

I'll handle them in the next PR. If there are more cases I need to handle, please tell me.

@BlueWinds BlueWinds self-requested a review January 28, 2022 16:38
@jennifer-shehane jennifer-shehane merged commit a43f3a2 into cypress-io:develop Jan 31, 2022
@cypress-bot cypress-bot bot mentioned this pull request Jan 31, 2022
Closed
tgriesser added a commit that referenced this pull request Jan 31, 2022
@tgriesser
Merge branch 'develop' into 10.0-release
72ddf83 
* develop:
  fix: move node 17 Check from Binary to CLI (#19977)
  fix: send click event with `cy.type('{enter}')`. (#19726)
  chore: Update Chrome (beta) to 98.0.4758.74
tgriesser added a commit that referenced this pull request Feb 1, 2022
@tgriesser
Merge branch '10.0-release' into tgriesser/refactor/error-improvements
36e48c3 
* 10.0-release:
  fix: restore @lmiller1990's changes
  feat: styling snapshots (#19972)
  fix bad merge overrides- GOOD CATCH TYLER!
  fix(unify): Updating reporter to consistently use app-provided "Preferred Editor" dialog (#19933)
  fix: move node 17 Check from Binary to CLI (#19977)
  fix: pass correct spec URL in `cypress run` on Windows (#19890)
  fix: send click event with `cy.type('{enter}')`. (#19726)
  feat: detect package manager in wizard (#19960)
  fix: refactor set specs by specPattern (#19953)
  chore: Update Chrome (beta) to 98.0.4758.74
@sainthkh sainthkh mentioned this pull request Feb 7, 2022
Merged
1 task
@sainthkh sainthkh mentioned this pull request Mar 8, 2022
Merged
2 tasks
@marktnoonan marktnoonan mentioned this pull request Apr 5, 2022
Merged
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tbiethman tbiethman tbiethman approved these changes

@BlueWinds BlueWinds BlueWinds approved these changes

@jennifer-shehane jennifer-shehane Awaiting requested review from jennifer-shehane

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

type('{enter}') does not fire click event
5 participants
@sainthkh @jamime @tbiethman @BlueWinds @jennifer-shehane