Forum Academy Marketplace Showcase Pricing Features

Adjust Tab Order

Is there a way to adjust the tab order in the user input fields that I have on each page? By tab order, I mean when the user hits tab on the keyboard and the type prompt moves to the next input field. Thanks!

1 Like

Yes, you can do this by grouping elements. :slight_smile:

For example, if you had 4 inputs (2 on top and 2 below), and wanted the tabbing to go from top to bottom first, instead of left to right - you would group the left side inputs, and then group the right side inputs. This would set the tabbing to go in this order: top-left, bottom-left, top-right, bottom-right.

*If it doesn’t tab in the order you set up for some reason, try copying, deleting, and re-pasting the input (sometimes this happens to me)

1 Like

That’s very helpful. I’ll give it a shot. Thanks!

1 Like

Do you know why you’d need to delete / copy / recreate the input for tab ordering to work? I’m looking for a solution that sidesteps the need to use a different input field.

My use case - I have a complex form with many workflows, the longest of which has 80 actions. So, deleting an input and re-referencing it takes a lot of work to re-set all of the corresponding workflows and actions.

This is after grouping them and it doesn’t work?

I’m having trouble with grouping since it’s a dynamic form and some elements show/hide depending on other values that are selected. As such, I have to have some elements in groups to show/hide them. So, that throws off the order it seems.

At it’s core - I just don’t know how Bubble chooses the next field for complex scenarios where some elements are multiple groups deep. I’d think it’d be straightforward, but so far I haven’t been able to reverse engineer how it works.

Okay, I created another page and ran a number of experiments. When some input fields are grouped, it’ll skip those ones and eventually tab through them in the order the groups were created (i.e., having nothing to do with the location on the page).

1 Like

Can you share a link?

Here’s a link to the page on our test server: https://meetaway.com/version-test/create-event

The only solution I’ve come up with is for me to create a bunch of groups and then add all of the inputs into those groups (and swap out groups previously created if need be). This way, users will tab through the items in the order that tabs were created, which I can control.

The big downside with this solution is that any time we add an input on the page, we’ll have to create new groups for that item and all items below it on the page for the tab order to continue working.

Is the Event Title Input outside of the group where the Start Date & Time Inputs are grouped? If there are groups within groups, the inputs or images of the outer group will be tabbed through first, and then the inner group is tabbed through (I think!). May be why it’s tabbing from Event Title to Section 3, and skipping the Start Date & Time Inputs initially?

Yeah, I was playing around with different grouping structures to try to reverse engineer what’s going on. So, some of the fields, like “start date and time” are in a separate group right now.

I think the solution is going to be for me to put everything into a group though. Bubble tabs through inner groups in the order in which the group was created (no matter where it’s located on the page). So, if I put everything in a new group (and create those groups in the correct order) then it’ll work. Downside is that it’s cumbersome to maintain.

Ah, I just recreated and see it tabbing in the created date order. Hmm… and the tabbing doesn’t work as expected without having any innergroups?

No - I have fields that show/hide based on previous inputs. The only way to do that is put them in a group. Then, since they’re in a group tabbing skips them unless all of the other inputs are also in a group.

Ohh, right. Wish there was a better way but sounds like that is the only way to have the order be correct.

Hi, I’ve been reading this thread as the tab order on my popup form doesn’t work as expected. It is because I have some dropdowns which have their own group each, so even if I put all the dropdown groups in another group with the text inputs, they don’t tab in order, in fact they don’t tab at all because they are in their own groups.

The reason I keep them in groups is that next to the dropdowns I have a button to add a new thing to the dropdown list, and I need to send the information to the new popup (add new thing) from the dropdown group.

Hope there’s another way to organise tabs soon!

There’s some JS code you can use that’ll likely make it work. Here’s a link the thread as well as the specific JS code I’m using which seems to work well.

Best,
Scott

1 Like

Hi Scott,
Thanks for the link. I’m a complete novice when it comes to JS so please help me out:
document = page?
function = tab?
a, input, select, button, textarea = input box or dropdown?
I think that’s right but not quite sure!
Thanks
Paul

I didn’t write the code, but here’s my understanding:

  • document = this entire page
  • attr(‘tabindex’,0) - this resets the tab index to zero for the items mentioned
  • $(‘a, input, select, button, textarea’) - explains the scope of what elements should have the tab index reset to zero. a = links, input = input field, select = drop down fields, button = buttons, and textarea = multiline input fields.

You could also specify specific fields and exclude others, but a blanket statement does what I want and is easier to maintain since changes I make in Bubble aren’t likely to require me to make any changes to this piece of code.

1 Like

Thanks for the explanation!
Here’s the code I’ve written to try and set a different tab index for each element on the page:

jQuery(document).ready(function($) {
$(‘Dropdown Choose an address’).attr(‘tabindex’,1);
});
All I changed is the “Dropdown Choose and address” to the different elements on the page.
Should that work?
Thanks
Paul

One thing - you’re setting the tab index to 1 instead of 0. My understanding is the default tabindex for items is 0. So, other items that aren’t specifically referenced will be a zero and this dropdown will be a 1. As such, it’ll tab through all of the zeros first and then the 1 after that. If that’s not the desired behavior then perhaps make it a tabindex 0.