Forum Documentation Showcase Pricing Learn more

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!

4 Likes