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

[gorgoroth]

Hi,

I have a list of log entries served by the backend. I want to add a filtering feature which allows to restrict results while typing, requesting the new filtered list to the backend passing the typed filter string.

The problem is that when the result is returned and the View is updated, the inpunt field lose focus and this force the user to click on the input field to continue typing the filter. This is not very smooth.

Is there a way to avoid (o restore) the focus and the cursor position on the input field after a view repaint?

[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

[gorgoroth]

Thanks, I was able to make it work in the Ellie. In my case it seems a little more complex. I try to investigate with your suggestion.

[rupert]

You might need to put more Html.keyed in?

So cover the input control itself, anything else that is at the same level inside whatever is the parent of the input control, and similarly all the way up to the root of your Html.

[gorgoroth]

I am using ElmUI and ELMUI Table. I have tried to put Element.Keyed everywhere with no success, at the moment.

[ni-ko-o-kin]

It would be easier to help if you could share an example so we can reproduce the problem.

My guess is, that the input field is inside the view where the new data from the server is rendered. So separating the data for the input and the response data should solve the problem.

[gorgoroth]

Unfortunately at the moment I don’t have the code at hand.

The part of the view for log entries is an ElmUI Column with three rows:

• first row containing the filter input
• second row containing the log entries list
• the third row containing a link to load more log entries

It seems that the entire ElmUI column is removed. I removed the second row in Elm but the problem persists. So is not because of the list of entries being updated.
I added DOM breakpoints (removal, subtree modification, attributes modification) in each row but no break occurs.
Adding a DOM removal breakpoint in che ElmUI Column node, breaks so is the column which is removed.

But why?

[gorgoroth]

Okay. I have found the issue. Nothing to do with keyed elements.
The problem is mine. I’m using a loading view while loading data but obviously this view ‘erases’ the previous view every time. I need to manage the loading phase in a different way.