# Bubble Founders: Please, Please PLEASE Add Manual Tab Order

**URL:** <https://forum.bubble.io/t/bubble-founders-please-please-please-add-manual-tab-order/52245>\
**Category:** Need help\
**Created:** [March 19, 2019, 1:46am UTC](https://forum.bubble.io/t/bubble-founders-please-please-please-add-manual-tab-order/52245 "2019-03-19T01:46:36Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![calicass83](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/calicass83/32/181870_2.png) [@calicass83](https://forum.bubble.io/u/calicass83)\
**Post date:** [March 19, 2019, 1:46am UTC](https://forum.bubble.io/t/bubble-founders-please-please-please-add-manual-tab-order/52245/1 "2019-03-19T01:46:36Z")

</div>

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?

@emmanuel any ideas why this is happening?

I am pulling my hair out over this!!

---

<div class="post-metadata">

**Author:** ![anon65040322](https://avatars.discourse-cdn.com/v4/letter/a/fbc32d/32.png) [@anon65040322](https://forum.bubble.io/u/anon65040322)\
**Post date:** [March 19, 2019, 2:00am UTC](https://forum.bubble.io/t/bubble-founders-please-please-please-add-manual-tab-order/52245/2 "2019-03-19T02:00:13Z")

</div>

> [@calicass83](#):
>
> 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)!

I doubt they will make it a priority or even implement that  
you can make your own tab system.

---

<div class="post-metadata">

**Author:** ![J805](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/j805/32/41267_2.png) [@J805](https://forum.bubble.io/u/J805)\
**Post date:** [March 19, 2019, 2:27am UTC](https://forum.bubble.io/t/bubble-founders-please-please-please-add-manual-tab-order/52245/3 "2019-03-19T02:27:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![calicass83](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/calicass83/32/181870_2.png) [@calicass83](https://forum.bubble.io/u/calicass83)\
**Post date:** [March 19, 2019, 4:19am UTC](https://forum.bubble.io/t/bubble-founders-please-please-please-add-manual-tab-order/52245/4 "2019-03-19T04:19:31Z")

</div>

Here’s a link to my editor: [https://bubble.io/page?type=page&name=employer\_profile&id=newchristiancarenetwork&tab=tabs-1](https://bubble.io/page?type=page&name=employer_profile&id=newchristiancarenetwork&tab=tabs-1)

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.

---

<div class="post-metadata">

**Author:** ![cowontherun](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/cowontherun/32/18211_2.png) [@cowontherun](https://forum.bubble.io/u/cowontherun)\
**Post date:** [March 19, 2019, 4:21am UTC](https://forum.bubble.io/t/bubble-founders-please-please-please-add-manual-tab-order/52245/5 "2019-03-19T04:21:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![cowontherun](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/cowontherun/32/18211_2.png) [@cowontherun](https://forum.bubble.io/u/cowontherun)\
**Post date:** [March 19, 2019, 4:28am UTC](https://forum.bubble.io/t/bubble-founders-please-please-please-add-manual-tab-order/52245/6 "2019-03-19T04:28:46Z")

</div>

Found my notes on this if this helps.

 ![Inputs](https://us1.discourse-cdn.com/bubble/original/3X/d/d/dd74ee04fcf26e7f3dcff50d6b7c43ebe4759787.png)

---

<div class="post-metadata">

**Author:** ![JonL](https://avatars.discourse-cdn.com/v4/letter/j/e5b9ba/32.png) [@JonL](https://forum.bubble.io/u/JonL)\
**Post date:** [March 19, 2019, 9:24am UTC](https://forum.bubble.io/t/bubble-founders-please-please-please-add-manual-tab-order/52245/7 "2019-03-19T09:24:20Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![J805](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/j805/32/41267_2.png) [@J805](https://forum.bubble.io/u/J805)\
**Post date:** [March 19, 2019, 11:58am UTC](https://forum.bubble.io/t/bubble-founders-please-please-please-add-manual-tab-order/52245/8 "2019-03-19T11:58:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![JonL](https://avatars.discourse-cdn.com/v4/letter/j/e5b9ba/32.png) [@JonL](https://forum.bubble.io/u/JonL)\
**Post date:** [March 19, 2019, 12:48pm UTC](https://forum.bubble.io/t/bubble-founders-please-please-please-add-manual-tab-order/52245/9 "2019-03-19T12:48:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![calicass83](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/calicass83/32/181870_2.png) [@calicass83](https://forum.bubble.io/u/calicass83)\
**Post date:** [March 19, 2019, 7:41pm UTC](https://forum.bubble.io/t/bubble-founders-please-please-please-add-manual-tab-order/52245/10 "2019-03-19T19:41:06Z")

</div>

Thanks so much for your suggestion.

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)

I hope that makes sense.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/bubble/original/3X/2/8/2847faa74692c2ffa5d939d3dc3724cdd060d247.png) [@system](https://forum.bubble.io/u/system)\
**Post date:** [May 28, 2019, 1:46am UTC](https://forum.bubble.io/t/bubble-founders-please-please-please-add-manual-tab-order/52245/11 "2019-05-28T01:46:36Z")

</div>

This topic was automatically closed after 70 days. New replies are no longer allowed.
