Using tab to navigate a form

Hi all!

I’ve had a minor usability issue that I can’t seem to solve…

When a user tries to use the tab key to move along in a form the cursor doesn’t move as expected (example: it goes from field two, up to one, down to four, then to three).

I can’t share a link at the moment because: Is bubble working today? but I thought I’d ask while we all had a bit of time.

I’ve tried reordering the layers but that didn’t seem to do the trick.

Anyone have other ideas/experience?

Thanks!
Jen

Pressing tab cycles through focus, so the solution likely lays somewhere there.

I haven’t encountered unexpected focus cycling in bubble yet and have only used the focus workflows and conditionals on a rudimentary level, so without seeing the form I can’t provide anything else

If you’ve found a solution let us know though!

My initial hunch is that you have different groups surrounding elements.

Quick example: Input 1 and Input 2 are in Group A and Input 3 is outside of Group A. (All of these elements are contained in Group All). Consequently, when you hit tab from Input 1, focus moves from 1 to 2. But, since Input 3 is outside of Group A, it doesn’t move as expected. And, when you do focus Input 3, then tab, it goes back to 1.

See if this applies in the case of your app. If so, see how you can logically group together the elements into the same group.

I think the issue had to do with groups!

The unfortunate thing about what I needed do to in order to get the tabbing to work as expected was give up some control over the layout when working with responsive. I still don’t understand how the order was working… I tried bringing items to the front/sending to back but that ordering didn’t seem to have any impact.

But I’ve got the tabbing working as users would expect now.

Thanks!

1 Like

Could @emmanuel comments on this perhaps? I’ve experienced this across the board as well.
Pressing ‘Tab’ sometimes jumps the next input in the form, with groups. How can we control this better?

This has been covered in other threads.

1 Like

Beautiful.