Keep cursor position and focus on input field while typing after a backend request

[rupert]

If you wrap your Elm Html in Html.keyed, it will avoid overwriting the DOM every time your view function is called.

To absoluately ensure this works, you may need to add Html.keyed all the way up to the root of your Html. Often just wrapping the input and everything at its level is fine.

A fairly recent discussion on the subject:

Stop Elm from touching a particular DOM node

I have a content editable node that is occasionally losing the focus when other parts of the DOM are being updated. I wrapped around the editable node using Html.Keyed which improved things but the focus loss still happens just less often. Which made me think, perhaps I need another Html.Keyed higher up. To be honest, I know roughly what Html.Keyed does, but am not completely certain when it will still allow a node to be deleted and replaced. If the parent of a keyed node is deleted and replace…

You can try it out by adding Html.keyed into this Ellie:

https://ellie-app.com/g85Cv3rQY2ya1