Forum Academy Marketplace Showcase Pricing Features

Solve tab order with Air Keyboard Shortcuts

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

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:
image
Copy the expression (and any other conditions you might need here, for example is input x visible:
image
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:
image

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!

9 Likes

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

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

:one: Install plugin Classify

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

:three: Set the desired tabbing order for any element using the ID Attribute field:
Screen Shot 2020-07-10 at 07.04.48
Where…
:arrow_right: … 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…)
:arrow_right: … the setTab(p, 15) portion is the command to run
:arrow_right: … and the number (in this case 15) is the tab index you want to give to the element.

Tips:
:arrow_right: Hidden elements can’t be focused (good news)
:arrow_right: Give a tab index of -1 to inputs you don’t want to be focused by tabbing (a delete button perhaps)
:arrow_right: 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.

8 Likes

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

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.

1 Like

Worked! Thanks bud

1 Like

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

Saved me so much time

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

This is great. Thanks! Super useful :slight_smile:

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