I'm working with the Elmish.Bridge flavor of the SAFE stack.
At the top level of the view, I create an input field like this:
Input.input [ Input.Value(model.FieldValue); Input.OnChange(fun e -> dispatch (EditFieldValue(e.Value))) ]
When I edit that field's value by typing in the middle of it, the model is updated as expected, but the cursor also moves to the end of the input's text.
My model is several layers deep and is completely made of serializable types (primitives, strings, collections, records, and unions).
I tried reproducing this in a toy app (where the model is much less complicated), but it works as expected there - the cursor maintains position.
Is there any way to determine why the cursor is moving under these circumstances?
Using the DefaultValue instead of Value should fix this.
This works with Fable.React and Fable.Elmish. Using DefaultValue will not initiate an update of the component / DOM in the react lifecyle and you should therefore not get the cursor changes.
From the link below: react uncontrolled components
In the React rendering lifecycle, the value attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a defaultValue attribute instead of value.