Okay, so the tabbing order issue seems unresolvable, at least for me. Is there a way at least to completely disable the ability to tab between fields?
1 Like
Group your tabs together, should work 
Iâve already been down this road. Isnât working for me. Iâve also tried the javascript and HTML others have suggested. Still isnât working. Thanks though.
Can you share link with edit rights so we can help. you can pm if you want.
One can just explicitly inject taborder. Note:CSS IS NOT CODE.
1 Like
Yes, just PMd you. Thanks so much for helping. Iâm at a standstill until I can get this figured out.
I will check in a few hours. currently out of the office.
I made the following changes and created a new page for every change so your work doesnât get compromised. Check below images:
I gave reusable element header a border when scroll is above > 5px, I usually use shadow but you have boxed content so thatâs not a great idea.
Login popup needs more padding on top and I did that, see if you like it better.
on the third image I made some changes to GROUP POST A JOB, so you can see how you can solve the issue, I think you can better make one big section and not having different sections because the tabbing will not work properly on the entire form. The tabbing works good on the first section 
I should also note that the âPost Childcare Jobâ page is outdated - it should actually have been deleted, because the latest version is now in a popup on the âMy Jobsâ page. On the Post Childcare Job page you made a copy of - I see that tabbing skips over the âWhat type of childcare do you need?â and âWhich of your children need care?â. Any ideas how to fix that?
Actually, at this point, until I can find a more reliable solution, is there a way to just disable tabbing altogether?
Hey Keith - could you please elaborate on how to do this?
Hey @MattN, you know my answer above is just plain not a good one. There is no tabindex css property. You can control it like this, though:
First, expose HTML ids for you project if you havenât.
Now, give your input elements (or whatever you want to change tab order for) a unique ID as follows:
In my page here Iâve got input1, input2 and input3 (from bottom to top). And letâs say I want my tab order to go in that order (from bottom to top).
So I want input1 should have tab order 1, input2 should have tab order 2, input 3 should have tab order 3.
We have to execute a little script for this. We can put it in the page HTML header like this:
And hereâs the script:
<script>
window.addEventListener("load", (event) => {
document.getElementById("input1").tabIndex = 1
document.getElementById("input2").tabIndex = 2
document.getElementById("input3").tabIndex = 3
})
</script>
What this script does is, for each element we are interested in, it gets that element by its id (document.getElementById(âinput1â).tabIndex = 1) and then changes its tabIndex property to be exactly what we want (document.getElementById(âinput1â).tabIndex = 1).
If you name your elements differently, you change the script, obviously. So if you have input that you have given the id MattN, and you want to set its tabIndex to 8, youâd say:
<script>
window.addEventListener("load", (event) => {
// document.getElementById("input1").tabIndex = 1
// document.getElementById("input2").tabIndex = 2
// document.getElementById("input3").tabIndex = 3
document.getElementByID("MattN").tabIndex = 8
})
</script>
Now, some smarty-pants might come along and say, âHey, Keith, your script shouldnât listen for âloadâ, you should do DOMContentLoaded.â But it seems that Bubble does something to adjust tabIndex of inputs after the page is loaded and firing this script on DOMContentLoaded did not successfully change the tabIndex values. So I had to make the script fire on âloadâ. Go figure!
7 Likes
@keith, thank you so much for this. Very clear instructions, much appreciated.
I got it working, though after some improvisation with your instructions. Hopefully others will find something here to help them navigate this truly awful relationship between tabbing and bubble.
My use case is a bit complex - the group containing my inputs is hidden on page load, and when it is shown, some inputs will be hidden, and some shown, depending on previous selections by the user. So Iâve got different inputs in different groups. This, as many know, is something that throws off predictable tabbing in many cases. Best is to have the inputs all in one group, one on top of another, where tabbing reliably goes top to bottom. Unfortunately not an option in my case.
Putting Keithâs code in the header didnât work for me, but I found after some further testing that the reason for this is that my inputs were hidden when the code was run (to my understanding that code runs on the load of the page, right @keith?). In fact, I only got it working when I ran a modified version of the code ONCE the inputs in question WERE visible.
This was the big breakthrough for me here, and I havenât seen it mentioned in other threads on tabbing that discuss javascript as a fix.
As far as I can see, modifying the tab order of inputs with javascript will only work if these inputs are visible when the script runs.
I ran the modified script via the toolbox pluginâs Run javascript action, after an action which shows the group my inputs are nested in. One thing to note on this: if showing the inputs using a conditional statement, you might need to add a pause action between whatever action makes your condition true (like changing an elementâs state) and the run javascript action. This is what I had to do. Otherwise, the condition to show the inputs might not react before the Run javascript action runs.
Hereâs the code I used in the Run javascript action, same as Keithâs only without the script tags and EventListener.
{
document.getElementById("input1").tabIndex = 1
document.getElementById("input2").tabIndex = 2
document.getElementById("input3").tabIndex = 3
}
The method isnât perfect - Iâm still having some issue with focus going to elements with workflows attached for instance, but itâs got me a lot further than before.
Thanks again Keith.
2 Likes
Hey, MattN: Correct on all counts. You canât modify a thing that isnât present in the page. In your case, with your inputs being in a group that is hidden, those elements do not exist in the page until they are shown.
And so, what happens is if you try to find that element, document.getElementById will return null. (So whatâll happen, if you look at your browserâs console is that youâd see an error reported like âCannot set .tabIndex of nullâ. The browser is telling us, âsome script tried to modify a thing that does not exist.â)
Your solution is exactly the right one. Instead of adding the script to the page header and attaching it to an EventListener, just execute the contents of the script (via Run JavaScript) in a workflow step after the target inputs are shown.
(Congratulations, you are now a real live web developer! )
If youâre having trouble with the timing of the Run JavaScript action, instead of putting it in the same workflow as your âshow Group_with_Inputsâ action, put it in a workflow that fires on âWhen Group_with_Inputs is visibleâ. Iâm pretty sure that event does not fire until the entire contents of the group exist in the DOM.
(But, if thatâs still too quick, you can just have workflows for each of your inputs: When input x is visible => Run JavaScript with code document.getElementByID("that_inputs_id").
Final minor comment: the code in your Run JavaScript action doesnât need to be enclosed in the curly braces. (Those just say, âthis is a code blockâ and they are necessary when we are creating a function and then saying, here is what the function does. But they curly braces are not needed here⌠However, they arenât hurting anything either, just FYI.)
So your run JavaScript can just be:
document.getElementById("input1").tabIndex = 1
document.getElementById("input2").tabIndex = 2
document.getElementById("input3").tabIndex = 3
3 Likes
Awesome - thanks for the clarification 
Hay @calicass83 . I was facing the same issue. When you group them, make sure they are in the same order (in the element tree) as your desired tabbing order. Worked for me. I realize this is an old post so you must already have solved the issue but positing for someone who might be looking for a simpler fix.
