mapbox / mapbox/mr-ui

Cursor Jumps to end of input after component is remounted

Open
#207 0 comments 1 reaction 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.