Triggering focus on mobile via JS module

MitchellJeppson

Using the JS.focus() function to set the focus to a text field does not work as expected on mobile.

I have the following simplified live view:

defmodule ExampleWeb.Live.ExampleLive do
  use ExampleWeb, :live_view

  def render(assigns) do
    ~H"""
    <.button phx-click={JS.focus(to: "#my_text_area")}>Click me to focus</.button>

    <input type="text" id="my_text_area" />
    """
  end
end

When I click the button via my desktop browser it works as expected, I get a blinking cursor in the text box and it is outlined in blue to signal it is selected. But when I do the same on my mobile I only get the blue outline, no blinking cursor and the keyboard doesn’t pop up like you would expect if you had selected a text field.

Tried on chrome and safari, same behavior.

The only thing I can find that might be the cause is here https://stackoverflow.com/questions/54049029/focus-doesnt-work-on-chrome-mobile-when-not-activated-with-click-workaround

essentially: mobile browsers require an actual user interaction to have happened not too long before the focus is programmatically triggered

Maybe something with how LiveView is handling the event makes the browser think it is no longer valid and won’t allow programatic focus anymore?

Any input is appreciated

7 comments

/phoenix #javascript #liveview

2 766 7

2024-12-08 21:29:44 UTC

First 7 of 7 Posts

alexanders

Looks like that’s just the way it works on iOS. Programmatically triggered focus doesn’t show the keyboard, but apply focus styles. I don’t think it has anything to do with LiveView because if you use plain JS, it will do exactly the same. And recent interaction doesn’t seem to help because if you warp focus into setTimeout it still doesn’t work. On Android it shows keyboard.

Post #1

MitchellJeppson

It does, but only under strict circumstances, of which I can’t find the exact requirements. But if you replace the whole focus thing with a hook and do it all with vanilla js then it works as expected, even on mobile.

example_live.ex

defmodule IssueExampleWeb.Live.ExampleLive do
  use IssueExampleWeb, :live_view

  def render(assigns) do
    ~H"""
    <.button id="my_button" phx-hook="MyHook">Click me to focus using phx</.button>

    <input type="text" id="my_text_area" />
    """
  end
end

MyHook.js

export default MyHook = {
    mounted() {
        button = document.getElementById("my_button");

        button.addEventListener("click", (event) => {
            console.log("handling click");

            const textarea = document.getElementById("my_text_area");

            textarea.focus();
        });
    },
};

Post #2

arcanemachine

Just so we’re all clear here, when you say “mobile”, you mean “iOS”? Or are you testing on Android as well?

Post #3

MitchellJeppson

Yea, good callout. I am testing on iOS, using safari and chrome. Would super appreciate if anyone with an android device could verify the same behavior or not.

Post #4

arcanemachine

OK so I tested out your example code on a couple devices, and my experiences (on iOS) match the issues you are describing.

Using `JS.focus/2`

iPhone 7, iOS 15, Safari: Does not focus (only applies focus CSS style to text box)

iPad 7th gen, iOS 17, Safari: Does not focus (only applies focus CSS style to text box)

Pixel 7, Android 13, Chrome: Focuses the text box and brings up the keyboard

Using hooks

iPhone 7, iOS 15, Safari: Focuses the text box and brings up the keyboard

iPad 7th gen, iOS 17, Safari: Focuses the text box and brings up the keyboard

Pixel 7, Android 13, Chrome: Focuses the text box and brings up the keyboard

It is worth mentioning that Chrome on iOS (like all iOS browsers) still uses Safari’s rendering engine (although not in the EU as of iOS 17.4 apparently), so iOS Chrome will likely have the same issue as Safari.

Based on my (limited) understanding of the situation, I would say that your suspicions are correct. At the very least, this situation warrants a new GitHub issue (I couldn’t find one on the topic, but I might not have looked hard enough).

Post #5

codeanpeace

This reminds me of another post on how WebKit used to require a whole rigamarole of propagating user gestures to call the WebAuthn API. Funnily enough, that discussion was also prompted by one of your questions. Requiring "native click listener" within LiveView for webauthn

Check out this answer on StackOverflow, the key bit is that HTMLElement.focus() needs to be called synchronously from the event handler like you’re doing in that hook. And from skimming the LiveView source code, I suspect the debouncing logic to LiveView bindings might be causing some unintended side effects here.
https://github.com/phoenixframework/phoenix_live_view/blob/d1250dc6541684fd19f5c8dd3aea692ad4b57950/assets/js/phoenix_live_view/live_socket.js#L658-L663

Post #6