How to define a sequence input fields?

Javascript after the page has loaded. It will likely need to be re-run any time Bubble makes inputs visible, and untested with repeating groups (which usually have hidden cells) …

Set a specific tab index to a specific field:
$('input[placeholder="field 6"]').attr('tabIndex', 1)

Set all tab index values to zero, the browser will then choose a natural sequence:
$('input').attr('tabIndex', 0)

Could extend this concept to buttons, etc as well.

1 Like

It goes group by group, so yes, it matters

Thanks @mishav. This seems like exactly what I need. Any chance you could share a link to the editor of this page? …I haven’t integrated much JS with Bubble yet so it’d be great to be able to look through your example.

Thanks!
Scott

Nevermind, I’ve got it figured out. Will need a bit of brushing up on my JS syntax to get this to work, but that’s entirely doable. Thanks again @mishav.

Update: Here’s the code I’m using which works perfectly. I’ve set it up to run this code anytime a new input is toggled to display on the page.

jQuery(document).ready(function($) {
$(‘a, input, select, button, textarea’).attr(‘tabindex’,0);
});

Hey Bubblers!
Wanted to share a solution we found, when the default tab order set by Bubble is not working as expected (especially when a repeating group with inputs and auto-binding is used so that the number of inputs is not known from the beginning.

  1. Attach the Jquery library to the app by pasting this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
in the settings->seo&metatags->script/metatags in header (see screenshot below)

  1. Insert an html element on a page, make it hidden and insert this code into it:
    <script type="text/javascript">  
    
>          $(function() {
>             var tabFix = function(){
>               // Handler for .ready() called.
>               $("input, select, button").each(function (i) { 
>                 $(this).attr('tabindex', "");
>                 //$(this).css({"border": "red solid 3px"});
>               });
>             }
>             setTimeout(tabFix, 1000);
>             var tabFixInterval = setInterval(tabFix, 200);
>           });
>         </script>

see example

This code resets the default order set by Bubble and does it so every 200 ms, to make sure that all new inputs
that might be added through repeating group will be also reset

Enjoy:slight_smile:

Thanks,
Levon.

Founder at Bubblewits - Bubble Certified Partner

http://bubblestore.io – a place to buy Bubble templates for landing pages, e-commerce, workflows, APIs etc.
http://iambubble.com - one page Bubble demo
http://builtwithoutcode.com/ - Collection of apps built on Bubble

11 Likes

Hello @levon,

do you know if the 200 ms consume some kind of cpu ressource? Or slowing the entire app? The Tab still going on some Icon and Button. Can we ask for INPUT only?

we don’t think It should consume CPU resources. And here is an updated code for skipping buttons and icons

> <script type="text/javascript">  
>  $(function() {
>     var tabFix = function(){
>       // Handler for .ready() called.
>       $(".tt-input, .Input, select").each(function (i) { 
>         $(this).attr('tabindex', "");       
>  });
>     }
>     
>     var tabRemove = function(){
>       $(".fa, .tt-hint,  .Button”).each(function(i) {
>         $(this).attr("tabindex", -1);
>         });
>     }
>                                             
>     
>       
>       
>     setTimeout(tabFix, 1000);
>     setTimeout(tabRemove, 1000); 
>     
>     var tabFixInterval = setInterval(tabFix, 200);
>    var tabFixInterval2 = setInterval(tabRemove, 200);
>                                     
>                                           
>   });
>   
>   
> </script>

 

Levon Terteryan
Founder@Bubblewits - #1 No-code Developer & Bubble Certified Partner
  Bubblewits.com - Get in Touch!
  Zeroqode.com - Buy Great Bubble Templates
  Builtwithoutcode.com - Bubble Apps collection

Hello @levon,
Thanks for the update. (checking in progress)

1 Like

Hi all, raising this subject again. Im using the Date/Time Picker and apparently (if I made everything correct) it breaks the Tab navigation within a form. It navigates inside the calendar and once finished, it goes back to the first element, and not the the next one.

Has anyone solved this issue? Any work arounds here?

Thanks

2 Likes

Just used this in a form that was acting very weirdly on the tab order, and it straigthened it right out.

Thanks for sharing @levon!

Actually, I’m getting an error from this, didn’t realize until now:

We were going crazy with the tabindex order issues so @levon’s code comes in real handy! The second snippet didn’t work, but that was just a few syntax issues.

Currently, Bubble already loads jquery so no need to load the library again. In fact, it can cause all kinds of issues so maybe that is what you experienced.

As for implementing it, easiest would be to add the following in the page header directly:

<script type="text/javascript"> 
$(function() {
     var tabFix = function(){
       // Handler for .ready() called.
       $(".tt-input, .Input, select").each(function (i) { 
         $(this).attr('tabindex', "");       
  });
     };
     
     var tabRemove = function(){
       $(".fa, .tt-hint,  .Button").each(function(i) {
         $(this).attr("tabindex", -1);
         });
     }                          
       
     setTimeout(tabFix, 1000);
     setTimeout(tabRemove, 1000); 
     
     var tabFixInterval = setInterval(tabFix, 200);
    var tabFixInterval2 = setInterval(tabRemove, 200);
                                     
                                           
});
</script>
14 Likes

Thanks @vincent56 very handy!

We realized that this script causes issues in firefox when using a dropdown. It gets real jerky. So we kind of went back to the old way of making sure every input for the same form is in the same group directly. So no grouping of individual inputs and labels for example. Same for buttons. That works, but sometimes a great pain :stuck_out_tongue:

2 Likes

This could be an awesome solution, I’m not sure I’m implementing correctly though because it hasn’t helped, but does some weird things to my form (completely removing one of my fields for example). Does it work when inputs like radio buttons, multi dropdowns, picture uploader, etc. are used? Or just basic input elements?

It seems like tabbing into the multidropdown is odd. For me the I only tab into it once nearly every other input on the page is exhausted even if it is not in a group and is in the correct vertical order

Anyone know if there is a Bubble solution to this yet? I’d really like to keep my field / field title groups so that it scales perfectly.

3 Likes

I guess no news around this topic? It would be great to know if someone was able to deal with this in some way

Thank you all for sharing your experience here

I am also following this thread for an official update from bubble.

I am also following this thread for an official update from bubble.

2 Likes