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

fix(keyboard): maintain cursor position on controlled React input #665

Merged
merged 4 commits into from Apr 29, 2021

Conversation

ph-fritsche
Copy link
Member

@ph-fritsche ph-fritsche commented Apr 27, 2021

What:
Closes #664

Enforce the correct cursor position after input handling

Why:
We trick React into picking up the changes on the input event. React moves the cursor to the end of the input.

How:

Also set the selection range if the value was not changed by an event handler.

Checklist:

  • [N/A] Documentation
  • Tests
  • Ready to be merged

@codesandbox-ci
Copy link

codesandbox-ci bot commented Apr 27, 2021

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3a2b99b:

Sandbox Source
userEvent-PR-template Configuration

@codecov
Copy link

codecov bot commented Apr 27, 2021

Codecov Report

Merging #665 (3a2b99b) into master (180a3d3) will not change coverage.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff            @@
##            master      #665   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           50        50           
  Lines          930       932    +2     
  Branches       366       367    +1     
=========================================
+ Hits           930       932    +2     
Impacted Files Coverage Δ
src/keyboard/shared/fireInputEvent.ts 100.00% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 180a3d3...3a2b99b. Read the comment docs.

@ph-fritsche
Copy link
Member Author

It looks like our fix in f51a7f8 also removed the need for this:

// if we *can* change the selection start, then we will if the new value
// is the same as the current value (so it wasn't programatically changed
// when the fireEvent.input was triggered).
// The reason we have to do this at all is because it actually *is*
// programmatically changed by fireEvent.input, so we have to simulate the
// browser's default behavior

@ph-fritsche ph-fritsche marked this pull request as ready for review April 27, 2021 13:39
@ph-fritsche ph-fritsche changed the title fix: maintain cursor position on controlled React input fix(keyboard): maintain cursor position on controlled React input Apr 29, 2021
@ph-fritsche ph-fritsche merged commit 03f38b9 into master Apr 29, 2021
@ph-fritsche ph-fritsche deleted the fix-664 branch April 29, 2021 11:17
@github-actions
Copy link

🎉 This PR is included in version 13.1.8 🎉

The release is available on:

Your semantic-release bot 📦🚀

@codepath2019
Copy link

Woohoo! Thanks @ph-fritsche

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cursor position is changed while using userEvent.keyboard
2 participants