Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Non synchronous value sets break cursor position

See original GitHub issue

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:

   value={(this.state || {}).value} 
   onChange={ e => {
     let 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: (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: for such things.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

HadrienPierartcommented, Nov 2, 2016

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

dancrew32commented, Apr 25, 2017

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

// Uncontrolled.
    onChange={(event) => this.setState({foo:})}/>
// Controlled.
<Textarea value={}/>
Read more comments on GitHub >

github_iconTop Results From Across the Web

Non synchronous value sets break cursor position #68 - GitHub
This first render w/ obsolete props is the reason of this issue: input receives outdated (its current) value (at this point cursor is...
Read more >
sp_cursorfetch (Transact-SQL) - SQL Server - Microsoft Learn
Fetches the first buffer of nrows rows. If nrows equals 0, the cursor is positioned before the result set and no rows are...
Read more >
How to set the caret (cursor) position in a contenteditable ...
I think it's not simple to set caret to some position in contenteditable element. I wrote my own code for this. It bypasses...
Read more >
Cursor Position - an overview | ScienceDirect Topics
You use the set cursor option to set the position cursor within the packet buffer. It uses the same data structure and arguments...
Read more >
16.10 - POSITION - Teradata Database
The cursor is repositioned before the first result row (if any) of the statement specified and SQLSTATE, SQLCODE and other SQLCA values are...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found