Form Tab Order for navigating a form's input fields

Anvil Q&A
1

Is there way to specify the order that components on a form are considered when a user hits [TAB]? My users intuitively hit tab after entering text in a form’s field, but I can’t determine how the tab order is determined.

1 Like
2

Nothing in the documentation on this, and the only post I see indicates this feature is in queue.

I wonder if it is reasonable (complexity and performance) to try to capture whether the tab key was the last key entered, and if so move focus to the next desired field?

3

Something like a “tab pressed” event for Forms?

4

at the browser level tabIndex determines the tab order. The tabIndex is automatically set by the browser depending on the type of element.

some components like Buttons and TextBoxes have a default tabIndex value of 0 (they’re tabbable)
Others like Labels aren’t usually tabbable and have a tabIndex of -1.

By default - components that are interactive have a tabIndex value of 0 and will be tabbed in the order they are placed within the form.

The first thing to consider would be how your components are placed. It may be that the components that are tababble are being unwittingly placed in the wrong order.

This can happen if you’ve put them inside containers where the next component on the form is the next component in the container but that does not match the next component visually.

Do you have a clone link or more specifics about the particular tab issue you’re facing?

Here’s a gif to highlight the container issue i’m alluding to - In the top example A/C and B/D are inside their own column panel containers within the main Card container, whereas in the bottom example all textboxes are placed inside the main card.
l4UITJAAVu

1 Like
5

Was this ever solved? If so can you post what was done. Many thanks

6

I never attempted to solve this, sorry. Too many other things to attend to and it looked beyond my abilities.

image001.png

7

Ahh ok, thank you for replying. I did used to use a very old UI developer (not python) it was probably one of the first out there… Lotus Approach. They used to have a nifty thing where you could go on the design layout and set the tab index,also removing elements you didnt want included…

Perhaps, something for Anvil to look at in the future. :slight_smile:

1 Like
8

Is there a way to override the default tabindex behavior of buttons?

I have a use-case where I want the user to tab between text-boxes, and to ‘skip’ the buttons on the form. So I’d like to set the tabindex of my buttons to -1.

It seems that TabIndex is not settable by CSS so I am stumped on how to use Roles here. Any other ideas?

I messed around with a javascript function using the guidance here, but got nowhere.

9

All html elements have a tabindex property. I’d try setting that via anvil.js.get_dom_node

1 Like
10

Thanks Owen. Tried but no luck… it seems I can set that tabIndex property, but, it is not achieving the behavior I’d hoped for. It doesn’t seem to affect the tab order.

11

I think you’re applying it wrong.
Off the top of my head it should be

dom_node = anvil.js.get_dom_node(self.button_1)
btn_node = dom_node.querySelector('button')
btn_node.tabIndex = '-1'

the anvil button element has an outer html div but the tabIndex needs to be set on the html button element.

1 Like
12

Outstanding. Thank you! this seems to have done it.