Any Tips for maintaining tab order in forms?


As far as I have figured out this is a bubble issue but it’d be great if anyone has any tips in how to deal with this

The issue :
When using any form module from Canvas, if I rearrange (copy input fields, replace field types, change positioning etc) the input fields, the tab order gets totally messed up… I only found a single mention that bubble uses the creation timestamps to decide the order in which input fields get focus on pressing tab, instead of the layout positioning? I may have misunderstood this part also so I’m not sure

Any tips around fixing this behaviour other than recreating the form with inputs created in the ‘correct’ order would be awesome!


1 Like

Hey @Green,

This is a Bubble issue but there is a fairly simple solution you can use. In the workflow that opens the popup (or you can put this into a ‘Popup is opened’ event as well) add a Run Javascript action as shown below.


Here’s the code you can simply copy and paste :point_down:

   $('input, select, textarea, button').each(function() { 
             this.type != 'hidden' ? $(this).attr("tabindex", 0) : '';

Good luck! Let me know if you have any questions!