Tab Index exposed

Idea
1

@emmanuel can we have the tab index exposed in the inspector. Just wondering how feasible it is?

http://www.w3schools.com/tags/att_global_tabindex.asp

8 Likes
2

Yes, that would be very useful indeed. My forms are a complete mess: if you tab, it will jump around the input elements in a seemingly random order.

2 Likes
3

I agree, need to expose the tab order value.

2 Likes
4

It’s been a year. Is this something that can be done? Out of order tabbing is bad UX.

3 Likes
5

I Agree on this

We can off course create a plugin that would do this but it would be a bad work around for something that should be handled by the editor

2 Likes
6

Does anyone have the secret sauce on how to force the app to display default focus on the first input in the group/form? Is it something to do with the order in which you add the inputs? Even if I add in order, the last input takes on the initial focus which is driving me crazy.

I’m also adding inputs in a hidden group and the inputs in the visible group in the same pop-up completely change focus as well!

Just trying to get around this a simple way without adding javascript to the page. @emmanuel or @josh ?

7

I should have searched better. These links probably contain what I need:

1 Like
8

I seen that earlier. But I would a more elegant solution.

Thanks for the work around though

1 Like
9

Within the same parent group, we assign tabs top to bottom and left to right (so if you arrange them in linear rows, it should go through each row from left-to-right and then move on to the next row). Right now we don’t define order between groups – if inputs are in different groups, it’s the order is somewhat arbitrary (and may change). And there’s no way to manually set the order, though solutions like the one Levon posted in the linked thread above might work.

We have an item on our roadmap (https://bubble.io/roadmap) to improve this situation, since we know it’d be helpful to have better tools for managing this. Unfortunately given the way we draw elements on the page it’s not super-simple to build this out so it’s not a quick win.

3 Likes
10

Thanks Josh. I’m now using the JS Toolbox plugin to explicitly set the tab index on each field and this is working perfectly for me for now.

11

It’s been another year. Would be nice to have this available.

4 Likes
12

How can I set the tab index?

13

I think the idea is make sure that they line up exactly underneath each other and you can help things along by putting the inputs in the same group.

1 Like
14

Are you using regular inputs? Or other elements like radiobuttons, multi dropdowns, picture uploader, etc.? I am finding that these types of elements seem to make tabbing go haywire.

1 Like
15

See screenshot. Note group order will follow the order in which you create the group.

Inputs
Inputs1280×1498 69.5 KB

1 Like
16

See screenshot added to my reply to codeables. From memory, I was only using a form with inputs.

17

I used this code with varying degrees of success to try to automatically sort everything. You should run this after page load.

$(document).ready(function () {
setTimeout(function () {
//adjust indexn
$(":input:not(:hidden)").each(function (i) { $(this).attr('tabindex', i + 1); });
//Remove Tab Index from Date Element
$('.picker__holder').removeAttr("tabindex");
}, 2000);
});
2 Likes
18

In case of console errors - make sure you’ve converted the quotes in the script from:
image

to:

$(document).ready(function () {
setTimeout(function () {
//adjust indexn
$(":input:not(:hidden)").each(function (i) { $(this).attr('tabindex', i + 1); });
//Remove Tab Index from Date Element
$('.picker__holder').removeAttr("tabindex");
}, 2000);
});

This is a helpful one, thanks!

1 Like