silverdr

silverdr

Focusing inputs dynamically added to LiveView form?

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.

Most Liked

03juan

03juan

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.

silverdr

silverdr

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 :wink:

03juan

03juan

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.

Last Post!

achempion

achempion

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

Where Next?

Popular in Questions Top

rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New

Other popular topics Top

JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 55125 245
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New

We're in Beta

About us Mission Statement