Set Input Tab Order - What does it do and how does it work?

I am not sure what this action does. It is a part of the Canvas utilities plugin. Can someone please elaborate on what it does?

  • Does it establish the focus priority on inputs?
  • What is the effect on buttons?

I have researched the documentation in both the Canvas manual and the plugin page with no success on finding guidance. :unamused:

Hey Carlos,

Great question!

As you know, if you start grouping inputs or adding new ones to a form in Bubble the order that your cursor tabs through the inputs can get quite mixed up.

Running the Set Input Tab Order action will reset the tabbing order set by Bubble so that your cursor should tab through the inputs left to right, top to bottom.

The effect it has on the button is to add it to the tabbing order so when you tab out of the final input it sets the focus to the button. This will allow the user to press the Enter/Return key to trigger buttons workflows.

One thing to note:

Until an input is visible on the page the first time it does not exist in the html code. This action will have no impact on elements not yet visible so you will need to run this action after the inputs have been shown.

For instance, if your inputs are in a popup you will want to run this action after the popup is visible. You can add it to the workflow that opens the popup if you like.

A really clean, low maintenance way to set this up is to use the ‘A popup is opened’ event and put the Set Input Tab Order action in that workflow.

Cheers and let me know if you have questions!

1 Like

Great stuff @eli!

Thanks so much for the detailed answer!

One thing I “discovered” is that when the inputs are behind a group (to hide and collapse that input based on a user’s role for example) the action does not impact it. Sometimes I place inputs on top of the form that run searches in the background to have the outcome ready for the final click of the button below (search giving a y/n if it found something). And … based on user roles I show/hide it. In this case, I had to place it further below and ungroup the first input so that when the popup opens the new tab order action does its thing and focuses on the popups top input. Just an fyi.

Want to note here that this action will not do anything to set focus on an input and only impacts the tabbing order.

To set the focus to a specific input you can use Bubble’s native ‘Set focus to an input element’ action.
image

Yeap @eli excellent point!

Thanks for the correction!