Cursor Jumps to end of input after component is remounted
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 90
- Forks
- 5
- PR merge metrics
- No merged PRs in 30d
Description
Recently this bug came up when using `Form` with `ControlText` in what-the-tile:
- User enters text into the inpute
- User presses enter (form submits, app handles updated input value and does things)
- User wants to change the value of the input, places cursor in the middle of the string in the input.
- User types a character, it appears in the correct place, but the cursor immediately jumps to the end of the input and subsequent characters are typed there.
This is known behavior in react when a controlled input re-mounts: https://stackoverflow.com/questions/45199687/react-input-cursor-moves-to-the-end-after-update
We can see the same behavior in the mr-ui docs example of `Form`: https://mapbox.github.io/mr-ui/#form
We didn't have a good reason to be using `Form` so just used `ControlText` directly to get around this, but I wanted to open an issue to document it in case it comes up again. It might be worth checking places that are implementing `Form` to see how it behaves in the real world.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the behavior in the mr-ui Form docs example with Form and ControlText, then inspect their implementations and real-world Form usages. Done means determining whether the remount causes the cursor jump and documenting the observed behavior or defining the required fix.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100