[bug] controlled input can't handle fast input

[pekeler]

Expected behavior

An <input> element with the value attribute tied to the state can handle user input regardless of user's typing speed.

Actual behavior

If the user types fast, the cursor in the input element jumps to the right.

Steps to reproduce behavior

• go to http://requirebin.com/?gist=bb5e05de5e5a4044caa935a736f259e7
• slowly type a few words into the input
• move text-cursor (selection focus) to left side of the input
• type crazy fast
• notice how the cursor suddenly jumps to right side

This problem seems to have something to do with barracks delaying _send() by a tick using setTimeout (https://github.com/yoshuawuyts/barracks/blob/7756160567e69e2c42880424a3021bdf12edb078/index.js#L160) because if we remove the setTimeout, the problem goes away (see: http://requirebin.com/?gist=21f18bbc0589b1a2d4525b5ed2d59d1f).

Moved here from #246 because this problem turns out not having to do anything with debouncing.

[yoshuawuyts]

quick response so you can go ahead:
While annoying this isn't exactly a bug on choo's side of things; it's an unfortunate constraint that is introduced when trying to do two-way binding. The settimeout() calls are necessary to keep zalgo in check, which means that if you try and emulate a synchronous binding over an asynchronous connection, race conditions will appear.

What I can recommend doing is to omit the binding from state onto the input field, but only reading from the field. State should only be used for the first round of populating the field, so the initial state is in sync. The former can be done by omitting line 21 value=${state.title}.

Hope this was helpful, cheers!

See Also

• http://blog.izs.me/post/59142742143/designing-apis-for-asynchrony

[pekeler]

How would you implement an editor for existing values (i.e. can't start with a blank value) that needs to validate as you type? Like this one http://requirebin.com/?gist=02030489be710830e3e572b32b914fd2

[pekeler]

This version seems to do what I need: http://requirebin.com/?gist=615e8ed2c5cddc62b3276a6b05509677 by only using the value attribute when the input element is not focussed, and using onload to set the initial value (I'm not sure why the latter is necessary).

Any way to do this simpler?

[yoshuawuyts]

Choo v5 is now completely sync, so keeping the form data in sync with the rendered result should be no problem. Cheers!

---

Closing because choo@5 will introduce a new API. See #425 for the merged PR. Thanks!