Cursor jumping to end of input after switching to React.useElmish

[bzuu-ic]

Issue

After refactoring parts of my application from using Elmish directly to using React components that use React.useElmish, I noticed various form inputs were misbehaving. Whenever you try to edit a form input by placing the cursor somewhere in the middle of a previously entered piece of text and start typing, the cursor jumps to the end of the field and you end up typing most of your characters in the wrong place.

The init, update and render functions are identical to the original code. Interestingly whenever I use prop.valueOrDefault instead of prop.value for keeping the input value in sync with the state, the jumping behaviour does not occur. Is this to be expected or perhaps a bug?

Reproduction steps

Given the following:

type State = { Name: string }

type Msg = ChangeName of string

let init () = { Name = "" }, Cmd.none

let update (msg: Msg) (state: State) =
    match msg with
    | ChangeName name -> { state with Name = name }, Cmd.none

let render (state: State) (dispatch: Msg -> unit) =
    Html.div [
        Html.input [ prop.className "input"
                     prop.value state.Name
                     prop.onChange (ChangeName >> dispatch)
                     prop.type'.text ]
        Html.text state.Name
    ]

These functions work fine, if used like this:

Program.mkProgram init update render
|> Program.withReactSynchronous "feliz-app"
|> Program.run

However it breaks if I wrap them in a ReactComponent with useElmish:

[<ReactComponent>]
let HelloWorld () =
    let (state, dispatch) = React.useElmish (init, update)
    render state dispatch

ReactDOM.render(
    HelloWorld(),
    document.getElementById "feliz-app"
)

[MangelMaxime]

Hello @bzuu-ic ,

if you search for "Elmish cursor jump" you should find several discussions on this subject as it was a common question in the past.

The short answer is that using prop.valueOrDefault is probably the way to go when using Feliz.

You could potentially have the same behaviour observed with Elmish if you were using Program.withReactBatched

Main discussion about this situation in Elmish repo: elmish/react#12

[bzuu-ic]

Thanks @MangelMaxime good to know it is broader than Feliz. Other than it being counter intuitive, the workaround seems easy enough to implement.