Solve tab order with Air Keyboard Shortcuts

[petter]

A question that’s been asked over and over in the forum is how to override Bubble’s built-in tab order. If inputs are separated into groups, their tab order may not be as you want, and especially if you have groups in your form appearing and disappearing from view. You’ll also find that icons, links and other elements can bring an unwanted tab stop even when they’re set to not clickable.

This solution solves these problems. Admittedly, not in the most elegant way, and involving a lot of manually set up logical steps, especially for large forms. But if you’re frustrated with your site feeling unprofessional, this will work at least as a temporary solution.

Step 1 - downoad the plugin
First, download the free Air Keyboard Shortcuts plugin made by @seanhoots

Step 2 - set up the plugin
Place the AirKeyboardShortcuts element on the page, preferably at the top and visible on page load, do avoid any loading errors. Set up it’s parameters as follows:

Note that it’s tab, not tabulator.

Step 3 - set up the workflows
In the workflow editor, look for this event and pick the element you just created:

Now, we want it to trigger an action based on what input is currently focused and for this, you’ll need to use the copy/paste trick that you may or may not already know, as these conditions can’t be set up in the workflow editor. Go to the input in question, and enter the conditions tab. You don’t have to do it on that input, but it gives you the advantage of finding that element at the top of the list:

Copy the expression (and any other conditions you might need here, for example is input x visible:

Remember to delete the condition again after you’ve copied it.

Then, in the workflow editor, set up a Set focus to an input element action, and paste the condition we just copied:

This way, whenever TAB is pressed and that input is focused, it will jump to whichever input you tell it to.

Bonus tip: for Chrome users, the extension Focus Indicator is useful to see which element is currently focused.

Hope this can be useful to some of you!

[getset]

@petter Super helpful mate! Do you set up each tab as separate workflow or steps in a single workflow?

[julienallard1]

Here’s a simple way to control tabbing in 3 steps:

Install plugin Classify

Insert this little script in the page HTML header an HTML element:

<script>
function setTab(p, index) {
var node = p.self;
if (node.className.indexOf('AutocompleteDropdown') != -1) {
node = p.self.querySelector('input.tt-input');
}
node.tabIndex = index;
}
</script>

Set the desired tabbing order for any element using the ID Attribute field:

Where…
… the square brackets indicate to Classify a javascript command to run (yeah it can also do JS, I haven’t had the time to post a tutorial on it yet…)
… the setTab(p, 15) portion is the command to run
… and the number (in this case 15) is the tab index you want to give to the element.

Tips:
Hidden elements can’t be focused (good news)
Give a tab index of -1 to inputs you don’t want to be focused by tabbing (a delete button perhaps)
Since this solution overrides Bubble’s tabbing function, you can use higher index number (1000, 1001, 1002…) so you make sure your tabbing order won’t interfere with Bubble’s. So when, let say, user opens up a form to be filled, focus can be set to the first input (with tab 1000) with a workflow. Then the next input to be focused will be the one with the next higher tab value.

[getset]

Hey @julienallard1, I’ve tried this as it’s definitely an easier solution to implement as I build my app. It doesn’t seem to work though. I’m starting at 1000 and I think I’ve got the script in the right place.

https://slinkyservice.bubbleapps.io/version-test/account

[julienallard1]

I just noticed that putting the script in the page header does not work. Try, instead, to put it in an HTML element on the page (with a size of 1x1, and position of x0, y0).

Please let me know if it worked for you so I can update my previous post.

[getset]

Worked! Thanks bud

[joshuaokonkwo]

thank you so much for this. I didn’t know that copy and paste exxpression trick.

Saved me so much time

[rnh]

@julienallard1

setTab(p, 15)

Wow. This was just awesome and super simple to set up compared to the other plugin explained on top.

[Ed-E]

This is great. Thanks! Super useful

I found I had to extend it a bit for checkboxes.

<script>
function setTab(p, index) {
var node = p.self;

if (node.className.indexOf('AutocompleteDropdown') != -1) {
node = p.self.querySelector('input.tt-input');
}

if (node.className.indexOf('Checkbox') != -1) {
node = p.self.querySelector('input');
}

node.tabIndex = index;
}
</script>

[coty]

Hello @Ed-E ,

I am trying to properly order my dropdown that was built using a different bubble plugin called “selectize dropdown” however the “classify” script / command does not seem to recognize this element.

Not sure if its as simple as editing the script in the same way you did for checkboxes but if possible would you be able to take a quick look and possibly provide the updated script that would allow me to use this plugin to properly setup my tab ordering. Here is a demo to the plugin I am using - https://sandboxjc.bubbleapps.io/selectize