[FREE PLUGIN UPDATED] Fix Tab Order

Showcase
1

Hi hi hi,

Another day, another free plugin… heeeeere’s err… Fix Tab Order (yes, it’s not a very imaginative name but hopefully easily searchable!)

This one fixes an issue that has annoyed me for a while - the totally terrible Tab order of input elements! When you create elements on a page in a random order, then have inputs within groups ( within groups (within groups) ) the tab order goes all over the place. This plugin should fix that issue.

The original base of this code is shamelessly stolen from the forum post by @levon here.

In its simplest form you just need to drop the TabFix element somewhere on the page and then when you tab through elements they will magically tab through from top to bottom, ya know, like they should.

Within the plugin there are options on whether or not to include the below different object types:

  • Text Inputs
  • Multiline Text Inputs
  • Search Boxes
  • Date Inputs
  • Checkboxes
  • Radio Buttons
  • Dropdowns
  • Buttons
  • Icons

You can also specify elements or classes to exclude if there are any you need to skip over, eg. you could choose to include all inputs but then exclude just the text input with the ID ‘dontFocusOnMe’.

There is also the option to specify a completely custom order to tab over the inputs so only the specified inputs will be tabbed through and in the order specified.

UPDATE 1.1.0: Now able to change the frequency of the auto update of the element tab order (eg. to 2500ms) or even disable it altogether so that the routine will only run once on page load.

Note, If the auto-update option is disabled any inputs that aren’t visible at first page load or elements within repeating groups will not be included in the tab order when they become active.

This is to fix an issue present when using certain browsers (eg. Firefox) where some elements may flicker if the auto update is running, and as it is set to 200ms by default it is quite noticeable. Setting a longer timeout or disabling this function altogether fixes this issue.

Demo page: There isn’t one, I mean, do you really need to see a demo?
Plugin page: https://bubble.io/plugin/fix-tab-order-1595502384716x853477727762120700

Any issues let me know.

Stuart B

20 Likes
2

Great !!!

3

I, for one, am thankful for the straightforward name. I was searching through the Plugin store yesterday and got lost…

4

cheers!

5

Been waiting 3 years for this.

6

Installed the plugin - And just set it to automatic on one of my pages where tabbing was pretty busted… And the plugin worked wonderfully. Will review!

1 Like
7

I’m glad you all like it, seems like the simplest plugins get the most love. In most instances it should be pretty much “plug & play” - just stick it on the page and it should do its thing.

Thanks for the review @w.fly very much appreciated!

Hopefully the plugin will be defunct one day if Bubble finds a better solution, until then - Happy TabFixing!

1 Like
8

Plugin works great, for the most part, thanks for your work! However with it inserted into my page, I’ve noticed that dropdowns on my popups will “flicker” when clicked with the mouse and then hovered over an option, as if your code is trying to focus/select it. When I remove the plugin from the page, the “flickering” goes away. Any ideas?

9

That is strange, I don’t get the flickering behaviour on any of my apps that use this in Chrome and they do include Dropdown boxes within the TabFix options (although I have also tested it without).

Which browser are you using when this issue occurs? I think this may be something that happens in Firefox so if that is the case I will try and look at a way to resolve this.

10

Yep, I’m using Firefox. Would be happy to test whatever fix you can come up with! Thanks!

11

This is due to the auto update of the tab order that happens once every 200ms, I’ve just pushed a new update (v1.1.0) which allows you to change the frequency of this auto update (eg. to 2500ms) or even disable it altogether so that the routine will only run once on page load.

If the auto-update option is disabled any inputs that aren’t visible at first page load or elements within repeating groups will not be included in the tab order when they become active.

I have tested this on Firefox and it fixes the ‘flickering’ issue and if you still want the auto update routine to run then setting a longer timeout means the flickering is not really an issue.

1 Like
12

Sounds like that should fix it for my specific application. Thanks!

I installed 1.1 in my app but the new Auto Update checkbox is not visible on the element properties dialog, even though I see it in your plugin settings and code. Maybe Bubble needs a bit of time to propagate your changes?

EDIT: Nevermind. Just refreshed my browser and it’s all good. Thanks again!

13

Thank you very much. This tab order mess was driving me crazy.

14

@talkingoldfish you are LIFE saver, thank you for this!

please consider adding multidropdown into the plugin settings. Although from up to down is working just fine, the problem occurs when I want to go back (shift+tab). It doesn’t work then. Looks like you can’t go back after the multidropdown

Editor example:

15

Just used this and it worked right away. Great work @talkingoldfish!

16

Love this plug in!!

How do i find the .className of an element type? I’d like to do just like skipping over bubbles native icons but skip over the Google Material Icon elements too. (https://material.io/resources/icons/?style=baseline)

image
image1096×236 20.8 KB

I can add it to the Skip Elements but not sure what the .className is of these icons.

I assuming there is such a thing?

Thanks

17

Amazing, amazing, amazing. Thank you so much for solving this critical issue @talkingoldfish.

Does anyone have workarounds/suggestions for getting Dropdown, Date/Time Picker inputs and searchbox values to work/focus using the Custom Order? I am landing on the element but am not able to get them to “Focus”.

Ideally, the Dropdown would open showing its options list, the Date picker would open like normal (as if it was clicked) after being tabbed to. And the SearchBox would focus to be typed into when it is tabbed to.

Any thoughts or am I missing something?

Thanks all!!!

18

Found it using CSS Scan Tool. The class is .material-icons
image

The tool I used is CSS Chrome Extension. I was looking at something else on the page and thought i might get the class from that and got it.

image
image2182×408 103 KB

19

@talkingoldfish Hi Stuart are you planning on making a fix/new version to the Fix Tab Order for the new responsive engine?

6 Likes
20

Not sure what i’m doing wrong if anything, but i added it to the page, then the element that pops up wasn’t affected at all. So tried adding it to the reusable element itself, still no effect. Seems to be working for others so i’m not going to leave a review as i’m sure it’s user error.