I have created a list with items inn LiveView which when an item is clicked is rerendered as an input field. Is there a callback or similar that I can hook into to also be able to put text input focus on the selected input field?

The autofocus attribute doesn’t seem sufficient in practice. The behaviour is not the same across all browsers. Can I use... Support tables for HTML5, CSS3, etc says it doesn’t work with iOS Safari. I’ve updated the table editor demo with an autofocus attribute that should resemble @behe use case :…

This only seems to works once. The next input will unfortunately not receive focus.

Changing an input type, or enabling, or adding it, then giving it focus is just one of those things that GUI libs worked out in the 1980s, but that web browsers still screw up royally. If you were to take the time to try, you’d find that you cannot do this reliably in straight browser-side Javascrip…

And this is the REAL reason why the Native vs. Web war never ends.

Similar question: I’d like to scroll to a newly added element. Basically Add dynamic inputs_for example · chrismccord/phoenix_live_view_example@1181c79 · GitHub , but the new element may be out of view so I want to move it into the viewport. Sounds like maybe there are no client side callbacks avail…

I have the same need, but decided to just let the item be a text input instead of click and turn it into a text input. If needed you can style the input so when it’s not focused it doesn’t look like an input, then when you focus it, the style changes and it looks like an input.

Found this nice workaround: Using Channels with LiveView for Better UX | Blog · Elixir School

This can now be solved with a phx-hook: Phoenix.LiveView — Phoenix LiveView v1.2.5

The following solution works for me. Create AutoFocus hook in ./assets/js/app.js let Hooks = {} Hooks.AutoFocus = { mounted() { this.el.focus() } } let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, ...}) Attach it to the first input field of a form <.form let={f} for={@c…

Elixir Programming Language Forum

Phoenix LiveView callbacks - to put text input focus on the selected input field?

Questions & Help Questions

chrismccord March 26, 2019, 12:36pm 2

Add autofocus to the input tag