input bound value leads to cursor jumping on every keystroke

[littleStudent]

I have a bound input element. So the state property storing the value is bound back to the dom element. On every keystroke this leads to the cursor jumping to the end of the input.

SSCCCE: https://ellie-app.com/3dWX47DKWwPa1
Browser: Safari (macOS & iOS confirmed)

module Main exposing (main)

import Browser
import Html exposing (Html, input)
import Html.Attributes exposing (value)
import Html.Events exposing (onInput)

type Msg
    = OnInput String

main : Program () String Msg
main =
    Browser.sandbox
        { init = ""
        , view = \str -> input [ onInput OnInput, value str ] []
        , update = \(OnInput str) _ -> str
        }

[harrysarson]

Note this only happens on Safari.

[norpan]

Also see whatwg/html#2412

[jinjor]

See also elm/html#174

[decioferreira]

this relates to /issues/134 and /pull/135

[digitalsatori]

same problem here, the problem found only on input element, textarea is OK. Safari only.

[evancz]

Some core team folks reviewed #135, and they tell me it should fix this. Can do a patch soon.

[lucamug]

To avoid confusion in case people hit this old issue:

It has been fixed in virtual-dom v.1.0.1 (https://github.com/elm/virtual-dom/releases/tag/1.0.1) released on Sep 13, 2018.

This is an Ellie for it: https://ellie-app.com/9d3gvnKDT2ra1

This issue is also mentioned in

#107
elm/html#105
elm/html#42
elm/html#62