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.

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

feat: Allow type() and click() to select an element inside contenteditable. #9066

Merged
merged 1 commit into from Nov 17, 2020

Conversation

sainthkh
Copy link
Contributor

@sainthkh sainthkh commented Nov 3, 2020

User facing changelog

When cy.type() and cy.click() were used against an element inside contenteditable, it only worked with the root contenteditable element. With this PR, this behavior is fixed. Users can freely work with elements inside contenteditable.

Additional details

  • Why was this change necessary? => To change things inside contenteditable, it is sometimes necessary to work with elements inside it.
  • What is affected by this change? => This is a breaking change. The behaviors of type() and click() changed slightly.
  • Any implementation details to explain? => The change was a bit bigger than expected. I had to change the behavior of runAllCheck in actionability.js to ignore elements inside contenteditable.

How has the user experience changed?

<div id="a" contenteditable="true"><span id="b">abc</span>def</div>
cy.get('#a #b').type('123')
// => before: abcdef123
// => after: abc123def

PR Tasks

  • Have tests been added/updated?
  • Has the original issue or this PR been tagged with a release in ZenHub?
  • Has a PR for user-facing changes been opened in cypress-documentation? => Add this to 6.0 changes doc.

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Nov 3, 2020

Thanks for taking the time to open a PR!

@sainthkh sainthkh marked this pull request as ready for review November 4, 2020 05:45
@sainthkh
Copy link
Contributor Author

sainthkh commented Nov 4, 2020

flaky failure.

Copy link
Contributor

@kuceb kuceb left a comment

Choose a reason for hiding this comment

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

awesome job

const finalCoords = getCoordinatesForEl(cy, $el, options)
let finalEl

// When a contenteditable element is selected, we don't go deeper,
Copy link
Contributor

Choose a reason for hiding this comment

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

@sainthkh would it be more accurate to say that "when a host contenteditable element is selected"? It feels a little bit like the comment doesn't match the condition because inner elements can still be contenteditable (.isContentEditable === true) but they won't pass this test here

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 agree. It seems that When a selected element is contenteditable can better describe the code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: breaking change Requires a new major release version
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants