JS.focus does not work on iOS for text fields #3563
Comments
|
So the issue is caused by the JS focus code running inside a phoenix_live_view/assets/js/phoenix_live_view/js.js Lines 99 to 105 in 3e57e50 But we cannot just remove that call, because imagine the (previously) default modal code: defp show_modal(js \\ %JS{}, id) when is_binary(id) do
js
|> JS.show(to: "##{id}")
|> JS.show(
to: "##{id}-bg",
transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
)
|> show("##{id}-container")
|> JS.add_class("overflow-hidden", to: "body")
|> JS.focus_first(to: "##{id}-content")
endwhich does multiple JS commands at once, trying to focus the first element inside the modal at the end. This only works when the focus waits for the element to be visible and because the JS.show also uses requestAnimationFrame, we need to wait. We could maybe do this, which would try to focus twice: exec_focus(e, eventType, phxEvent, view, sourceEl, el){
+ ARIA.attemptFocus(el)
window.requestAnimationFrame(() => ARIA.attemptFocus(el))
},
exec_focus_first(e, eventType, phxEvent, view, sourceEl, el){
+ ARIA.focusFirstInteractive(el) || ARIA.focusFirst(el)
window.requestAnimationFrame(() => ARIA.focusFirstInteractive(el) || ARIA.focusFirst(el))
},but I'm not 100% sure that this is always fine. I'll try to look into if we can remove the requestAnimationFrame for show, but it was added for a specific reason: 9b67518 |
This ensures that JS.focus works on iOS. Fixes: #3563
This ensures that JS.focus works on iOS. Fixes: #3563
This ensures that JS.focus works on iOS. Fixes: #3563
Environment
Actual behavior
Using JS.focus does not focus a text field if you are on iOS mobile. Here is some discussion and a simplified example of the issue. Sound like safari doesn't like to pop up the virtual keyboard unless it is a directly in response to user action. In that linked discussion above it was floated that it could be due to the debounce logic.
The text was updated successfully, but these errors were encountered: