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

Add autofocus to the input tag

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 : https://liveview.cleverapps.io/tables

• Chrome: works for the first input appearance, but not for the other subsequent inputs. The cursor is at the beginning of text.
• Firefox: doesn’t work at all,
• MacOS Safari : works for each input, the input is focused and all the text inside is selected,
• iOS Safari: the input is focused, but the text is not selected and the keyboard isn’t shown.

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 Javascript. The closest you can come is to set a timer to fire to set focus after you’ve done the other stuff, and even then it’s iffy.

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 available? Any plans/thoughts on supporting something like that?

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={@changeset} id="my-form"
  <%= label f, :name  %>
  <%= text_input f, :name, phx_hook: "AutoFocus" %>
  ...
</.form>