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.