levand / quiescent

A lightweight ClojureScript abstraction over ReactJS
Eclipse Public License 1.0
613 stars 46 forks source link

controlled input caret jumps to end when input is modified #36

Closed dustingetz closed 9 years ago

dustingetz commented 9 years ago

Here is a demo repo with reduced test case.

The final commit in this repo fixes the bug via the react-async-input monkey patch described here.

Uncomment the monkey patch on line 13 of index.html to see the broken behavior.

dustingetz commented 9 years ago

I dont think the React maintainers consider this a bug in React, because idiomatic React uses state for things like this. Even if your state is limited to a single stateful React component at the top of the hierarchy, all onChange handlers eventually forward through a setState call so the bug does not get triggered. All the state has to be lifted entirely out of React to trigger the bug which is of course the style Quiescent forces.

This is all probably wrong, there are many related issues in the React repo in various states and this issue can probably be repro'ed in various Flux architectures where state is not backed by react

Raynos commented 9 years ago

This is a known issue with most virtual-dom things.

I actually feature detect for this in my virtual dom implementation ( https://github.com/Raynos/virtual-hyperscript/blob/master/index.js#L55-L62 ). I specifically ensure that setting of the value property on a DOM node goes through a softset hook which implements a "check before set" semantics. This means you cant overwrite the state of the DOM with the same state but reset the cursor.

levand commented 9 years ago

Sorry for the long turnaround time on this. There is now a fix for it in master, though you'll have to use one of the new uncontrolled inputs

See the documentation at https://github.com/levand/quiescent/blob/master/docs.md#cursor-jumping-and-controlled-inputs