unwanted cursor jump with onInput

[wintvelt]

When the value of an input field is managed in the model, like so:

input [ onInput HandleInput, value model.value ] []

Then fast typing will cause the cursor to jump from the current position to the end of the input field.
SSCE here https://runelm.io/c/wdr.

This "bug" has led to various patterns, such as using defaultValue instead of value. But that particular solution is "leaky". If the input field is reused by VDOM, its internal value will also be reused. In a specific scenario (example here) this causes contents of a password field to show.

[process-bot]

Thanks for the issue! Make sure it satisfies this checklist. My human colleagues will appreciate it!

Here is what to expect next, and if anyone wants to comment, keep these things in mind.

[process-bot]

Thanks for the issue! Make sure it satisfies this checklist. My human colleagues will appreciate it!

Here is what to expect next, and if anyone wants to comment, keep these things in mind.

[rtfeldman]

Related: https://github.com/elm-lang/html/issues/42

As I understand it, one solution to both of those issues would be to make onInput synchronously trigger update and then view and then a re-render to the real DOM, bypassing the current requestAnimationFrame batching that improves performance in the general case.

Not saying that's a good road to go down, but it's my understanding of how React gets value to "Just Work."

[rtfeldman]

Related: https://github.com/elm-lang/html/issues/42

As I understand it, one solution to both of those issues would be to make onInput synchronously trigger update and then view and then a re-render to the real DOM, bypassing the current requestAnimationFrame batching that improves performance in the general case.

Not saying that's a good road to go down, but it's my understanding of how React gets value to "Just Work."

[OvermindDL1]

What I do is set a flag on the model to 're-render' a given textarea while also giving a command/task to send another 'after' message. The view then sets the text via value when the flag is set, else it does not set a value at all. On the callback of the given message then it un-sets the flag on the model to 're-render' a given textarea. Hacky, but it works, and it can only jump the cursor when I am explicitly setting the value and never any other time. Quite a hack though...

(Technically what I am doing right now is removing and re-adding the textarea to the DOM in actuality to work around other bugs, blehg).

[OvermindDL1]

What I do is set a flag on the model to 're-render' a given textarea while also giving a command/task to send another 'after' message. The view then sets the text via value when the flag is set, else it does not set a value at all. On the callback of the given message then it un-sets the flag on the model to 're-render' a given textarea. Hacky, but it works, and it can only jump the cursor when I am explicitly setting the value and never any other time. Quite a hack though...

(Technically what I am doing right now is removing and re-adding the textarea to the DOM in actuality to work around other bugs, blehg).

[TreyE]

I face a similar issue for my 'masked input' controls. What I do is track the cursor location and then execute a command after the draw using a port. It's a very ugly way to do it.

I don't mind having to manually track the location of the cursor in my model - since I'm altering input as I get it that makes sense - I just wish there were a property or something on the input control I could set that would place the cursor at the right location when my input is rendered.

I feel like this issue is really the main blocker for building masked input controls intuitively in Elm.

[TreyE]

I face a similar issue for my 'masked input' controls. What I do is track the cursor location and then execute a command after the draw using a port. It's a very ugly way to do it.

I don't mind having to manually track the location of the cursor in my model - since I'm altering input as I get it that makes sense - I just wish there were a property or something on the input control I could set that would place the cursor at the right location when my input is rendered.

I feel like this issue is really the main blocker for building masked input controls intuitively in Elm.

[stormont]

I think I'm seeing a related issue to this. Most of the time, my input fields work fine. But occasionally, I seem to get "double inputs" where the letters get doubled up. I've had users report it and sporadically seen it myself, but I've had trouble getting it to reproduce.

[stormont]

I think I'm seeing a related issue to this. Most of the time, my input fields work fine. But occasionally, I seem to get "double inputs" where the letters get doubled up. I've had users report it and sporadically seen it myself, but I've had trouble getting it to reproduce.

[charukiewicz]

I would like to confirm this issue. This is happening in both our little 400 LoC internal tool and our very large 20k LoC production feature, so the size of the Elm app seems to have no effect on the problem (my initial assumption was that this could be fixed using more Html.lazy, but that does not seem the case).

EDIT:

I managed to recreate the issue based off of the code in #42:

https://ellie-app.com/3sNGf5J5CZCa1/2

[charukiewicz]

I would like to confirm this issue. This is happening in both our little 400 LoC internal tool and our very large 20k LoC production feature, so the size of the Elm app seems to have no effect on the problem (my initial assumption was that this could be fixed using more Html.lazy, but that does not seem the case).

EDIT:

I managed to recreate the issue based off of the code in #42:

https://ellie-app.com/3sNGf5J5CZCa1/2

[zwilias]

As a possible workaround; one could use defaultValue to set the initial value, onInput to sync it to the model, and a Html.Keyed node so values can be reset. That would look something like this: https://ellie-app.com/3fPSxX6VHK7a1/0

[zwilias]

As a possible workaround; one could use defaultValue to set the initial value, onInput to sync it to the model, and a Html.Keyed node so values can be reset. That would look something like this: https://ellie-app.com/3fPSxX6VHK7a1/0

[evancz]

Tracking in https://github.com/elm-lang/virtual-dom/issues/107. Thank you for the report!

[evancz]

Tracking in https://github.com/elm-lang/virtual-dom/issues/107. Thank you for the report!