Material-ui controlled textfield & container component - cursor is jumping to the end

help
1

Hi all,

I have a problem with my controlled TextField. I have an action which updates LocalState (handleChange). The container reads the LocalState and sends the value as a prop to the dump component.
Everything seems okay, but if I want to edit the beginning of the string, the cursor jumps to the end after the first keypress.
Is there a way to prevent this?
Here’s the TextField:

<TextField
  floatingLabelText="Email"
  name="email"
  fullWidth
  onChange={handleChange}
  value={email}
/>

And the weird behaviour:

1 Like
2

FYI: I’ve seen similar behavior when writing online comments, so perhaps it is not related to material-ui.

3

On the material ui example page, there’s a controlled example, but instead of a container component, it uses react state. Maybe when the container sends new props, it rerenders itself. But how can I avoid it?
Function components cannot have ref, so I don’t know how can I handle this without converting the textfield to a non-controlled component and update the LocalState in the background when it changes.