Editing content of input field moves caret position to end

[panmona]

I noticed that when you edit an input field the caret always jumps to the end. This can be reproduced on the Demo app: https://shmew.github.io/Feliz.MaterialUI/#samples/sign-in

Repro

1. Type into input
2. Move caret to start
3. Type a character

Expected result

Caret position stays the same

Actual Result

Caret moves to the end

A short video of what happens:

caret-bug-2021-08-06_12.08.04.mp4

[Zaid-Ajaj]

Maybe because of textField.autoFocus true?

[panmona]

@Zaid-Ajaj The behavior is the same when autoFocus is false.

[panmona]

After investigating further I found references to the underlying issue (fable-hub/Feliz#320, elmish/elmish#60) with the proposed solution of using valueOrDefault.

For Mui we would need the same but it has to be applied on inputRef instead of ref. The implementation would be:

open Fable.Core.JsInterop
    // ...

    /// Can be used instead of `textField.defaultValue` and `textField.value` props to override input box value.
    let inline valueOrDefault (value: string) =
        textField.inputRef (fun e -> if e |> isNull |> not && !!e?value <> !!value then e?value <- !!value)

Can we add this to the Feliz.MaterialUI library @Shmew? I would be very willing to make the PR but would need some guidance for it.