Trouble with text inputs and double update roundtrips

Learn
14

It is actually enough to just use something like Html.Events.on "input" Html.Events.targetValue instead of Html.Events.onInput.

As explained in the notes here, onInput creates a synchronous event handler and makes sure all commands are run immediately after update, to make sure the browser treats them as “happening after user interaction”. This bites you here:

  1. User types something, TextUpdated is fired synchronously.
  2. update recieves your message, returns the old contents of the <textarea>.
  3. view is also run synchronously, to prevent the model and the view from diverging
  4. Your command is executed, goes through update, and causes the view to change again to the desired state. Since the VDOM caused the textarea to update twice, history and selection is lost.

So it may be a bug in the runtime, since it calls view before running synchronous commands. I’m not sure what the intended behaviour in that case is.

Here is an ellie logging what is happening here: https://ellie-app.com/bf3fGX2pLCJa1

grafik

it also shows a way of getting the timestamp synchronously by (ab)using Json.Decode, maybe don’t do this.

1 Like