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.