[elm-discuss] Trouble initializing input with value

[Carlos De la Guardia]

Howdy all,

I'm creating an Elm version of this app: https://carlosd.org/cheatsheeter/
It's got a bunch of fields users can edit, and which are saved in local
storage. I'm running into a problem trying to produce the following
behavior: when a user opens the app, it should read their data from local
storage, insert it into these text fields, and then the user should be able
to edit the field, close the app, and repeat the process.

The specific problem it that setting an input's value with 'onInput' resets
the cursor position to the end of the field every time they type. If you
don't set the value, then the input is always created empty, rather than
with the desired value. Perhaps using defaultValue would solve this
problem?

[danneu]

I'm back with Elm today after a year long break, so I'm out of touch with
any of its idiosyncrasies.

But in an effort to remember how to use Elm, I made a toy app with the ol
`List (Id, String)` of input fields that uses `Html.programWithFlags` to
initialize the model from localStorage. Then I used a `saveToStorage` port
to persist the change to each input to localStorage.

I couldn't encounter any issues, though I'm not 100% sure what your issues
were. Do you have some code to show?

[Mickey Vashchinsky]

That is a strange behavior.
Here is a simplest example, where the cursor stays where it was:
https://ellie-app.com/3XzqjnmpZg6a1/0

Maybe your scenario is different?

Post by Carlos De la Guardia
Howdy all,
I'm creating an Elm version of this app: https://carlosd.org/cheatsheeter/
It's got a bunch of fields users can edit, and which are saved in local
storage. I'm running into a problem trying to produce the following
behavior: when a user opens the app, it should read their data from local
storage, insert it into these text fields, and then the user should be able
to edit the field, close the app, and repeat the process.
The specific problem it that setting an input's value with 'onInput'
resets the cursor position to the end of the field every time they type. If
you don't set the value, then the input is always created empty, rather
than with the desired value. Perhaps using defaultValue would solve this
problem?

[Oliver Searle-Barnes]

If you type some text, move the cursor back a few characters and then type
quickly the cursor will jump to the end. It's an issue that all VDOM
implementations have to workaround but as yet Elm doesn't have one. I
believe there's an issue open for it somewhere but I wasn't able to track
it down.

Post by Mickey Vashchinsky
That is a strange behavior.
https://ellie-app.com/3XzqjnmpZg6a1/0
Maybe your scenario is different?

Post by Carlos De la Guardia
Howdy all,
https://carlosd.org/cheatsheeter/
It's got a bunch of fields users can edit, and which are saved in local
storage. I'm running into a problem trying to produce the following
behavior: when a user opens the app, it should read their data from local
storage, insert it into these text fields, and then the user should be able
to edit the field, close the app, and repeat the process.
The specific problem it that setting an input's value with 'onInput'
resets the cursor position to the end of the field every time they type. If
you don't set the value, then the input is always created empty, rather
than with the desired value. Perhaps using defaultValue would solve this
problem?