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!
Yes, you can do this by grouping elements.
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)
Thatās very helpful. Iāll give it a shot. Thanks!
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).
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
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.
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.