Another Tabbed Input Order Problem Here

[augusto1]

Hi There,
Another Tabbed Input Order Problem Here…

1. Groupped as a Column (Responsive LayOut)
2. Inputs are just one above another one

Simple one… does not work…
The order is simple caotic…, no matter what I do…
Any help?

The Result… Chrome simple ignore Bubble Rules…

https://share.getcloudapp.com/bLud90Jp

[eli]

Yep, this is an issue. Had to deal with it yesterday and it requires some JS to manually set the tab index. The issue is that Bubble draws the html elements in the order they are created (not the order displayed) and simply uses the flexbox order property to reposition the elements on the page.

As you can see from the attached gif, while the inputs I have on the page visually go

• First name
• Last name
• Email
• Password

In the html they are drawn as

• First name
• Password
• Email
• Last name

Since no tab order is set on the inputs the browser has to anticipate which input should be next and is using the html structure to do that.

[celob185]

If I cut-then-paste the element in the desired order, would it fix the issue?

[eli]

That should work. Will be a pain to manage long term.

I haven’t used it but you could try this plugin as well:

Fix Tab Order Plugin for Bubble, by Stuart B

[augusto1]

Tks for all…

What I’ve done… Make all inputs, see the order they are, change they from places to get de desired order, finally, give name to each input…

[localprosnet]

This is terrible. I hope this is something they have on radar.