Forum Documentation Showcase Pricing Learn more

Completely disable user's tabbing ability?

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 :wink:

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:

1

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 :wink:

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!

3 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.

image

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! :wink: )

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
2 Likes

Awesome - thanks for the clarification :grinning: