Hi,
on mobile, i’ve got some popups with different input for data entry.
For some reasons, the system automatically focuses on the first input as soon as th popup loads. I don’t want this to happen, and i haven’t set this behaviour.
Why does it happen? and how can i solve?
Thank you
Andrea
Hey,
does anyone have an idea about that?
Thank you
Andrea
hello,
did you already tried the " set focus" element action when displaying the pop-up? this allows you to choose which input do you want the app to focus first.
1.Workflow
Hope it helps, Happy Holidays 
Hi @InstantStartUp,
thank you. sure i tried, i’m already using this command on the desktop version. The problem here is that, in mobile version, i don’t want it to happen, so basically i don’t want anything to focus, but seems the system, only in mobile version, does it automatically.
You may need to do some work on your logic.
From your app editor
Paste this into that field:
<meta name=“viewport” content=“width=device-width, user-scalable=no”/>
Note that: this will only work if you are at least on a personal plan.
If your app is still on a free plan, this solution will not work.
And make sure to test your app experience afterwards.
The above solution may not be perfect for all use cases, but it does stop that automatic “zoom-in” on the input field (on mobile).
Wait, maybe I am misunderstanding. My previous suggestion refers to the “browser focus” rather than the “input focus.”
Which may be the problem your describing, I’m not entirely sure (it is an issue unique to mobile).
You do say that you are using the “set focus to input” action on your desktop version.
Are you using the same workflow, for you mobile version?
If so - you may need to set a condition on that action, so that it only runs when
“current page width > 900”
Which would mean: when that worflow is run, your input will only be focused if the devices screen is larger than 900pixels
hi @jordanfaucet,
sorry but it is not working. I forgot to say that the desktop version and the mobile version of this page are done in 2 different pages, so the workflows can be considered separated.
Again, in the mobile version i have no workflows, but still the input focus automatically. In my opinion it doesn’t make sense it does, and i don’t know how to not make it happen.
Any ideas?
Thank you
Andrea
Which mobile browser are you testing on? Try a variety (iOS+Android, Chrome, Firefox, Safari, Opera etc) and see if that could be caused by the mobile OS or browser app itself.
After some searching around I found many people talking about this default behavior on mobile browsers:
I think I solved this issue by placing a text input above all other inputs in the popup/page and making it invisible with styling while still keeping the element present on page load. You’ll want to remove the placeholder text and mark the field disabled. Tested on all mobile browsers I have access to, seems to do the trick @escaperoomers
See demo: https://sandboxthings.bubbleapps.io/version-test/disable-autofocus
Editor: https://bubble.io/page?type=page&name=disable-autofocus&id=sandboxthings&tab=tabs-1
hi @philip,
no is not. i tried with a normal and updated version of mobile google chrome in an android phone (guess that the 60% of the traffic on my website comes from this os and browser). Also tried with ios and safari, still happens the same 
I tested the above solution (Auomatic focus on mobile version) on iOS Safari, iOS Chrome, Android Chrome and Android Firefox and the inputs no longer focus with the invisible input placed at the top of the popup.
This topic was automatically closed after 70 days. New replies are no longer allowed.
