New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

unwanted cursor jump with onInput #105

Closed
wintvelt opened this Issue Dec 21, 2016 · 8 comments

Comments

Projects
None yet
9 participants
@wintvelt

wintvelt commented Dec 21, 2016

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

This comment has been minimized.

Show comment
Hide comment
@process-bot

process-bot Dec 21, 2016

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 commented Dec 21, 2016

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

This comment has been minimized.

Show comment
Hide comment
@rtfeldman

rtfeldman Jan 4, 2017

Member

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."

Member

rtfeldman commented Jan 4, 2017

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

This comment has been minimized.

Show comment
Hide comment
@OvermindDL1

OvermindDL1 Jan 6, 2017

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 commented Jan 6, 2017

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

This comment has been minimized.

Show comment
Hide comment
@TreyE

TreyE Jan 19, 2017

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 commented Jan 19, 2017

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

This comment has been minimized.

Show comment
Hide comment
@stormont

stormont May 31, 2017

Contributor

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.

Contributor

stormont commented May 31, 2017

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

This comment has been minimized.

Show comment
Hide comment
@charukiewicz

charukiewicz Jun 13, 2017

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 commented Jun 13, 2017

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

This comment has been minimized.

Show comment
Hide comment
@zwilias

zwilias Jun 19, 2017

Member

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

Member

zwilias commented Jun 19, 2017

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

This comment has been minimized.

Show comment
Hide comment
@evancz

evancz Jul 7, 2017

Member

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

Member

evancz commented Jul 7, 2017

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

@evancz evancz closed this Jul 7, 2017

Zinggi referenced this issue in Zinggi/NoKey May 7, 2018

flo
Fix #8
The fix is a known workaround, as seen here:
https://github.com/elm-lang/html/issues/105
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment