iOS set focus on input

[cx1]

Hi there,

In my workflow, I use the block set focus on input. This works perfectly on my browser and android devices, but not on iOS. According to other forums Apple has an issue with that, but there are some workarounds to be done on the code. Does anyone know how to solve that via bubble?

Thanks,
Gabriela

[charly]

Hello Gabriela,

If I remember well, it is a matter of font size inside. With a 14px font, it will not focuse anymore (I think it should be equal or more than 12px so as not to zoom)

[cx1]

Hi, my problem is not with zoom. In the settings, i configured the app to not autozoom when clicked. The problem is the “focus on input” does not focus on iOS

[georg]

bump, any solution for this? I have the same issue…

[aj11]

bump, any fix for this?

[guillaume2]

bump, any fix for this?

[ben29]

Bump, any fix for this?

[marca]

This is actually a limitation in mobile Safari, which deliberately prevents programmatic focusing before the user has interacted with the page.

For further reading on the subject, here’s a stackoverflow thread and a medium post.

[chris19]

Thanks, Marca for looking into my bug request. I’ve experienced this with the google chrome browser on iPhone does this also explain this? The link says that it works in chrome?

[jdubbya]

FYI - Bubble is aware of this issue and there’s an existing feature request covering it.

Has anyone figured out a workaround for this scenario, in particular for “chat” pages? It’s not a great experience to have to tap the input field after every sent message. (As per @chris19 above, this also does not work in Chrome.)

[oddddd]

Bump, any fix for this?

I’ve seen workarounds elsewhere (not Bubble related) using Vue.js and other things I don’t technically understand. Anyone found a way to integrate into a Bubble project?

[oddddd]

EDIT:
Test it here
https://setfocusioskeyboard.bubbleapps.io/version-test

So I think I’ve figured it out. I had to resort to using javascript, so I can almost guarantee that someone who actually knows javascript can make a more elegant version of this, but hey if it works it works.

HOW TO KEEP iOS KEYBOARD ACTIVE/FOCUSED ON A TEXT FIELD IN BUBBLE:
To include javascript install the plugin called Toolbox. (I’m sure other javascript plugins work as well, have not checked)

Then to be able to connect javascript with bubble elements enable the ‘expose the option to add an ID attribute to HTML elements’ option in settings in the General tab.

The problem I was trying to solve was for a user to be able to add several items into a database without losing the iOS keyboard after saving each item. I used an input form, a button, and a repeating group with a text element to display the data. (DB is called ‘Steps’, the DB field the user is adding to is called ‘Action’.) It looks like this:

Add an ID Attribute for both the input form and another for the button. Call them whatever you want. Example:

Input form id:

Button id:

Then in the button’s workflow add ‘Run Javascript’

The javascript code I used:

 var saveButton= document.getElementById("save_step");
 var textInput= document.getElementById("input_step");

saveButton.onclick = function() 
{if (textInput.value !="") 
  {textInput.value = ""; }
{
        textInput.focus()
    }
}

That’s it. Well almost. For whatever reason, it doesn’t work the first time the button is clicked, but does work on all subsequent clicks. Not wanting to explain this to my users I found a workaround:

Turn off visibility on page load for input form:

Then have the user click the ‘save’ button in order to display the text field.

Another workaround might work better in other apps, but in my case it really helps the UX feel native.

So there you have it. Hope this can be of use for more people.

[oddddd]

For the last part to work well, consider adding ‘FieldName isn’t empty’ as a search constraint. Nobody wants to look at an empty field.

[snowsnow]

@oddddd

I think the script works only from the second click because it gets activated only after the first click.

Try to run the script on page load. Then it will work the first time you click the Save button.

I did a similar thing on my app and it works at the first click.

[oddddd]

@snowsnow

Thank you! That is way more elegant.

[ramasuarez]

You saved me a lot of time. Thank you.

[eagledev]

@oddddd thank you man! this is very helpful!

[davewliu]

@oddddd @snowsnow @ramasuarez @eagledev did you guys have to change the javascript code that you ran on page load?

not sure why, but tried to add the same script on pageload but first click still doesn’t work (while second click does work).

many thanks!

[snowsnow]

@davewliu
This plugin fixes the problem easily:
Open iOS keyboard (Apple iPhone) Plugin | Bubble.

[davewliu]

thanks!

bought it, weirdly it doesn’t work for my app even after messing around for quite some time… although the demo works.

guessing it’s user error :-T will reach out to the plugin author for ideas