Focusing inputs dynamically added to LiveView form?

This sample from the live view docs JavaScript interoperability — Phoenix LiveView v1.2.5 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.

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

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.

You can use alpine.js and render new fields with x-init="$el.focus()" property or similar.