Input fields in repeating group not highlighted on mobile

I have an application to generate quotes for construction companies. It displays a set of operations that a contractor may quote to a customer with the name of the operation, its unit of measure and an input for quantity (prefilled with 0) and an input for that operation’s quoted price. The price is prefilled with a “standard” price, but the contractor can change the price.

To speed-up the input process users will “tab” through the repeating group’s input fields using the keyboard and enter the values. On desktop when the focus is moved to an input, the contents of the input are automatically selected. So when you type it automatically replaces the existing value with what you type. I didn’t do anything special, Bubble handles this.

However, when using the page on a mobile device, when you hit the “Next” key on the keyboard, the focus is moved to the next input in the repeating group, but the input’s contents are not highlighted. So the user has to manually delete the contents of the cell before entering a new value. At least it does this on a Pixel 6A and Samsung Galaxy S10…

What can I do to have the behavior from the desktop on mobile?

I saw this article Clicking in input field to Select all field content automatically but it doesn’t work for repeating groups. More exactly I cannot access the input from the repeating group. I can only access inputs that are outside of the repeating group.

I’ve done multiple searches on the forum and Google but couldn’t find an answer.

Here is a sample application that reproduces this same error.

And the editor

Try from your mobile device and from your desktop to see the difference.

Thank you for your help.

I just tried from Mobile and confirmed what you were seeing:

I’ll be following this topic as this is something I’d like to figure out for my own app as well…

1 Like