Autofocus on textinput

Hello!

I want to switch between two containers. One is displayed as a button, and when it is clicked, I want it to change to a text input where the user can create their own button.

I am using conditional styling to control which one is visible and want to trigger autofocus on the text input when they switch. It seems there is no autofocus option in the conditional styles. Is there a way to manipulate this attribute conditionally?

image

HI!

Is it correct that you want the following?

  1. A Text Edit visible by default, but without autofocus
  2. Given some condition, you want to make that Text Edit have autofocus turned on

If that is the case: The browser/autofocus feature only allows the focus to be set automatically as soon as the component is rendered. That means: You would need 2 Text Edits: One without autofocus, visible given condition 1), and another Text Edit with autofocus, visible given condition 2). As soon as condition 2) is true, the second Text Edit is made visible and gets focus.

Hi
Auto focus does not work on my iPhone 14. It works on Chrome, safari on macbook and Android phone.
On the iphone it does not matter if I use installed PWA, chrome or safari, same behavior.

It should be easily reproducible for you. Can you create a challenge? Is there a workaround?
Thank you

Hi!

This is a known limitation / unsupported on Safari for iOS (probably also Chrome for iOS)

https://bugs.webkit.org/show_bug.cgi?id=195884

Not sure if workarounds exists!

1 Like