In another thread we discussed how to get input sets’ indices of a has_many association inputs inside a nested form. This was quickly solved and @LostKobrakai posted even a link to his github gist showing one of the good uses of the said indices. The question though is whether there is an established method of focusing newly added input. Or even better a selected one from a newly LiveView added set of inputs.
1 Like
This sample from the live view docs JavaScript interoperability — Phoenix LiveView v0.17.7 shows how to push events to highlight elements from the server. The same could be done for focusing a new input.
Add the push event to the socket when handling the event that makes the changes to the form.
Basically like push_event/3 window event example but executing .focus() on the element.
1 Like
Thank you for pointing me to the docs above. Based on them I added phx_hook: "FocusOnMounted" to the input:
<%= text_input fli, :description, phx_debounce: 500, phx_hook: "FocusOnMounted" %>
and
let Hooks = {}
Hooks.FocusOnMounted = {
mounted()
{
this.el.focus();
}
}
to my app.js. I expected that this way I wouldn’t have to handle/push events manually. So far seems to work from the very first time, which means I surely omitted something 
1 Like
You’re welcome. Sometimes the solution is too efficient that I also have doubts it should be working so well.
Do consider the window event listener method though as it allows for granular control in more dynamic work flows, for example if you want to focus different inputs without complex logic to mutate your templates, and it’s efficient as the pushed event is sent in the same payload to the client. It also ties in nicely with client-only manipulation from click and key events through JS.dispatch.
1 Like
You can use alpine.js and render new fields with x-init="$el.focus()" property or similar.
