Controlled input cursor jumps when used with layers #1698

Closed
spicyj opened this Issue Jun 16, 2014 · 5 comments

Projects

None yet

5 participants

@spicyj
Member
spicyj commented Jun 16, 2014

See http://jsfiddle.net/Bobris/ZZtXn/2/ (try typing at the beginning of the text box).

@spicyj spicyj added the bug label Jun 16, 2014
@syranide
Contributor

Am I right in thinking that React.renderComponent being async (updating the DOM) is the problem?

@zpao zpao added a commit to zpao/react that referenced this issue Jul 21, 2014
@spicyj @zpao spicyj + zpao Add ReactUpdates.setImmediate for async callbacks
Callbacks passed to this setImmediate function are called at the end of the current update cycle, which is guaranteed to be asynchronous but in the same event loop (with the default batching strategy).

This is useful for new-style refs (#1373, #1554) and for fixing #1698.

Test Plan: jest
adae02b
@zpao zpao added a commit to zpao/react that referenced this issue Jul 21, 2014
@spicyj @zpao spicyj + zpao Use setImmediate to defer value restoration
Depends on #1758.

Fixes #1698.

Previously, controlled components would update too soon when using something like ReactLayeredComponentMixin (i.e., before the layer's updates could propagate from the parent), causing the cursor to jump even when always updating the new model value to match the DOM state. With this change, we defer the update until after all nested updates have had a chance to finish, which prevents the cursor from misbehaving.

Also cleaned up the logic around updating a bit -- the .value and .checked updates in ReactDOMInput weren't being relied on at all so I removed them and opted for a simple forceUpdate instead. I also got rid of _isChanging which hasn't been necessary since the introduction of update batching.

Test Plan: Tested the example in http://jsfiddle.net/Bobris/ZZtXn/2/ and verified that the cursor didn't jump. Changed the code to filter out numbers and verified that the field prevents typing numbers (attempting to do so still causes the cursor to jump to the end). Also verified that controlled and uncontrolled radio buttons, textareas, and select boxes work.
f0d9780
@spicyj spicyj added a commit to spicyj/react that referenced this issue Jul 22, 2014
@spicyj spicyj Add ReactUpdates.setImmediate for async callbacks
Callbacks passed to this setImmediate function are called at the end of the current update cycle, which is guaranteed to be asynchronous but in the same event loop (with the default batching strategy).

This is useful for new-style refs (#1373, #1554) and for fixing #1698.

Test Plan: jest
12b532c
@spicyj spicyj added a commit to spicyj/react that referenced this issue Jul 22, 2014
@spicyj spicyj Use setImmediate to defer value restoration
Depends on #1758.

Fixes #1698.

Previously, controlled components would update too soon when using something like ReactLayeredComponentMixin (i.e., before the layer's updates could propagate from the parent), causing the cursor to jump even when always updating the new model value to match the DOM state. With this change, we defer the update until after all nested updates have had a chance to finish, which prevents the cursor from misbehaving.

Also cleaned up the logic around updating a bit -- the .value and .checked updates in ReactDOMInput weren't being relied on at all so I removed them and opted for a simple forceUpdate instead. I also got rid of _isChanging which hasn't been necessary since the introduction of update batching.

Test Plan: Tested the example in http://jsfiddle.net/Bobris/ZZtXn/2/ and verified that the cursor didn't jump. Changed the code to filter out numbers and verified that the field prevents typing numbers (attempting to do so still causes the cursor to jump to the end). Also verified that controlled and uncontrolled radio buttons, textareas, and select boxes work.
354fb44
@slorber slorber referenced this issue in moreartyjs/moreartyjs Jul 28, 2014
@Tvaroh Tvaroh Update README.md 9f4ace4
@zpao zpao closed this in #1759 Jul 30, 2014
@ericclemmons
Contributor

Is there a resolution for this within the client codebase? Looking @spicyj's fiddle (and having the exact same issue on v0.11.x), I still can't figure out the solution...

@anarchistkasan anarchistkasan pushed a commit to anarchistkasan/react.backbone that referenced this issue Jan 20, 2015
Alex Morozova Fix for jumping cursor
fixes eg this issue - facebook/react#1698
87c8072
@damianmr

Same question here. Any workaround?

@zigomir
zigomir commented Feb 12, 2015

@damianmr I also thought I had a problem with it, but later discovered it was my own fault. Are maybe using value={foo} where defaultValue={foo} might do?

@damianmr

Nope, React shows a warning in such cases.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment