Non synchronous value sets break cursor position

hi! thanks for the great component,

If you are controlling the component value but don’t update the value immediately, the textarea will render a few times between resetting the old value and moving the cursor to the end of the textarea (so start typing in the middle of some text).

minimal reproducible code below:

<Textarea 
   value={(this.state || {}).value} 
   onChange={ e => {
     let value = e.target.value;
     setTimeout(() => this.setState({ value }))
  }}
/>

You might ask why update the value asynchronously, and that would be a valid question! Some times you don’t have a choice, the upper setState may be async, and if you are managing state across Portals/Subtrees/Layers?Whatever-the-current-term-is the additional ReactDom.render() is async generally.

I have poked through the code to try and see If anything immediately stood out as the cause of the issue but didn’t see anything (due almost certainly to my ignorance), perhaps its due to triggering _resizeComponent in the onChange() handler, maybe it’s related to: https://github.com/facebook/react/issues/1698 (tho that is clearly been fixed).

and not to hawk my own wares, but perhaps explicitly managing the controlled/uncontrolled state of the input might help, we use: https://github.com/jquense/uncontrollable for such things.

[HadrienPierart]

Somehow, using the defaultvalue prop instead of the value prop fixes the issue and the cursor/caret works properly…

[dancrew32]

So basically use one or the other. Thanks @HadrienPierart!

// Uncontrolled.
<Textarea 
    defaultValue={this.state.foo} 
    onChange={(event) => this.setState({foo: event.target.value})}/>

// Controlled.
<Textarea value={this.state.foo}/>