Cursor Jumps to end of input after component is remounted #207
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.