I have tried all of the solutions I could find in the forum and nothing helps. The javascript I found here messes up my fields (for example takes the dashes out of a phone number input) and one of my dropdown inputs won’t even work.
I have grouped all of my inputs and the tab takes the user from the 3rd question straight to the field at the bottom of my form. Nothing I have tried has helped, including cutting and re-pasting in the order I need - doesn’t help.
I’m seeing this issue going back more than a year now…can you please make this a priority? Disorganized tabbing sequence makes my website seem highly unprofessional (and frustrating to the user)!
***More Info ****
One thing I am noticing is that the tabbing is unreliable when using a variety of elements other than straight inputs (multi-dropdown elements, radio buttons, picture uploader, etc.). Anyone else having this issue?
I haven’t had too much of a problem when I think about it from the beginning when I design things. I keep things in groups which also help with responsiveness as well. Try the group thing, it really helps. Make sure everything is lined up perfectly on top of eachother as well, evenly spaced. Hope that helps a little bit. If you want to share your app maybe we can take a look at it for you or give some design ideas. Hope you can get it resolved. I know how frustrating things can get when it’s not acting the way it should.
I can’t figure this out for the life of me. I’ve tried deleting the inputs and then re-adding them, even grouping them and stacking them one right underneath the other, but nothing works. This really shouldn’t be that difficult.
I seem to remember you can’t implement the JS toolbox solution if the inputs are in a group. Could be wrong but as an experiment on a test page, you can try the JS solution on ungrouped inputs.
Copying and pasting the groups in the order you want to tab usually des the trick for me
Let’s say you have 4 groups with 4 inputs and you created them in sequential order.
Group 1 - Input 1
Group 2 - Input 2
Group 3 - Input 3
Group 4 - Input 4
If you tab it will go from 1 to 4.
Now you realise you forgot one additional input in between 2 and 3. You create it and slip it in.
Visually:
Group 1 - Input 1
Group 2 - Input 2
New Group- New Input
Group 3 - Input 3
Group 4 - Input 4
You would expect to follow the visual order when tabbing but unfortunately it does by order of creation.
Tab order:
Group 1 - Input 1
Group 2 - Input 2
Group 3 - Input 3
Group 4 - Input 4
New Group - New Input
The solution for me is to cut the 3 last groups and inputs and paste them back.
Group 1 - Input 1
Group 2 - Input 2 New Group- New Input Group 3 - Input 3 Group 4 - Input 4
Cut and paste back
This will fix tabbing order. It can be a pain in the ass depending on the complexity of the form or if you a constantly adding new inputs.
My assumption is that Bubble assigns an internal order to input elements based on when they are created and tabs according to that when not in the same group. Cutting and pasting from the new group-input reorders them from top to bottom again in reference to the ones that don’t need reordering (in my example group 1 and 2).
Interesting. This makes me thing it might have something to do with which one is “on top”. Has anyone tried moving the inputs to the front in reverse order that you want them to tab through? I wonder if this would solve it. Just right click and choose move to front.
Haven’t tried but I doubt it’s that because moving to front and back I think just changes the css z-index value and I don’t see any reason why Bubble team would create the tabbing algorithm based on that.
By ‘placeholder’ do you mean the name of the input or the actual placeholder text? So for example, if I have a radio button input called ‘RadioButton Gender’ with placeholder text ‘Gender’, would the placeholder you referenced be “RadioButton Gender” or “Gender”?
Also, would the javascript be continuous lines of script for all groups/inputs? For example, I have maybe 20 groups and groups inside groups on a profile page. Some groups have more than 1 question in it, while others might have only 1. I do this for the purposes of collapsing hidden questions. Would the javascript field simply list each input/tab order line by line? Like this:
$(‘input[placeholder=“Gender”]’).attr(‘tabIndex’,1)
$(‘input[placeholder=“Phone Number”]’).attr(‘tabIndex’,2)
$(‘input[placeholder=“Click to upload a profile photo”]’).attr(‘tabIndex’,3)
$(‘input[placeholder=“Birthdate”]’).attr(‘tabIndex’,4)
$(‘input[placeholder=“Languages”]’).attr(‘tabIndex’,5)
$(‘input[placeholder=“Religion”]’).attr(‘tabIndex’,6)
