We can’t do this unfortunately, as we process input container by container, and rep groups are one of them.
Okay, thanks for the quick response @emmanuel.
To anyone else who comes across this post, @mishav and @fayewatson figured out that repeating groups treat the sequence differently depending on the Layout Style. Here’s a post with more details.
@emmanuel, how does tab order work when some items are in groups and others are not?
…I’m using groups to show/hide input fields (which must be in groups to show/hide) and can’t seem to get tab order to work as I want. Thanks.
Okay, I created another page and ran a number of experiments. When some input fields are grouped, it’ll skip those ones and eventually tab through them in the order the groups were created (i.e., having nothing to do with the location on the page).
Anyone have any ideas for how to override this behavior?
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.
- 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)
- 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>
 |
|
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!
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
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 
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