# Focus and Tab Order

**URL:** <https://forum.inductiveautomation.com/t/focus-and-tab-order/80364>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [October 11, 2023, 9:02pm UTC](https://forum.inductiveautomation.com/t/focus-and-tab-order/80364 "2023-10-11T21:02:14Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alfredo\_Egmo](https://avatars.discourse-cdn.com/v4/letter/a/ccd318/32.png) [@Alfredo\_Egmo](https://forum.inductiveautomation.com/u/Alfredo_Egmo)\
**Post date:** [October 11, 2023, 9:02pm UTC](https://forum.inductiveautomation.com/t/focus-and-tab-order/80364/1 "2023-10-11T21:02:14Z")

</div>

Is there a way to re-order or reassign the Elements-Tab Order in a window?  
As example, with the controls at the image, I want first the username, then password, then button, so at the start the Username will have the Focus, then if the user press TAB it will go to Password and then to the Button.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/b/8b365bafa5a2de92bdfc6379f71284560acb5b57.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 11, 2023, 9:23pm UTC](https://forum.inductiveautomation.com/t/focus-and-tab-order/80364/2 "2023-10-11T21:23:57Z")

</div>

I've done a quick test òn 8.1.31 with four text fields and a button. Tab order seems to be left to right, top to bottom but with some leeway given to misalignment in the vertical direction. If I set up

```auto
[Text0] [Text1]

[Text2] [Text3]

    [Button]

```

Default tab sequence is 0, 1, 2, 3, button.  
If I raise `Text3` a little higher than `Text2` the sequence remains unchanged.  
If I raise it about half its height above `Text2` then the sequence changes to 0, 1, 3, 2, button.

What problem are you seeing?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [October 11, 2023, 10:26pm UTC](https://forum.inductiveautomation.com/t/focus-and-tab-order/80364/3 "2023-10-11T22:26:10Z")

</div>

Careful use of grouping is occasionally necessary to manipulate tab ordering in Vision, but generally speaking the rules are as Transistor deduced.

You are technically able to customize things to _great_ depth by going into Java Swing's internals. I wouldn't recommend it, but for anyone sufficiently motivated, a great starting point is the official Swing tutorial on the focus system:

> **[How to Use the Focus Subsystem (The Java™ Tutorials \>        
           ...](https://docs.oracle.com/javase/tutorial/uiswing/misc/focus.html#customFocusTraversal)**
>
> This Swing Java Tutorial describes developing graphical user interfaces (GUIs) for applications and applets using Swing components

---

<div class="post-metadata">

**Author:** ![Alfredo\_Egmo](https://avatars.discourse-cdn.com/v4/letter/a/ccd318/32.png) [@Alfredo\_Egmo](https://forum.inductiveautomation.com/u/Alfredo_Egmo)\
**Post date:** [October 12, 2023, 3:09pm UTC](https://forum.inductiveautomation.com/t/focus-and-tab-order/80364/4 "2023-10-12T15:09:34Z")

</div>

What I was trying to find is a way to "reorder" the tabs index (order), so as in my example I have first the BUTTON, what if I want to move it at the end of the tab-focus order...?  
I thought there will be an easy way as in visual studio where we have an TabIndex number.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/5/051b17c197f4203b37439509b498d94fc22aa5cb.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 12, 2023, 3:17pm UTC](https://forum.inductiveautomation.com/t/focus-and-tab-order/80364/5 "2023-10-12T15:17:38Z")

</div>

You want it to be obvious to the user and obey standard expected behavior. If button is the first in the tab order then it shoud be on top.

I too used to do some work with Visual Basic. Actually _not_ having to set the tab order is a benefit. It will work logically.

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [October 13, 2023, 1:18am UTC](https://forum.inductiveautomation.com/t/focus-and-tab-order/80364/6 "2023-10-13T01:18:14Z")

</div>

> [@Alfredo\_Egmo](#):
>
> Is there a way to re-order or reassign the Elements-Tab Order in a window?

Sometimes I find myself needing to explicitly enforce a tab order. It's usually when there is a focusable object such as a table or button that is along side user inputs or in a container with user inputs. The easiest way I've found is to use the focusLost or focusGained event handler to override any potential unexpected behaviors.

**Example:**

```auto
# Inside the focus change event handler
if str(event.cause) == 'TRAVERSAL_FORWARD':

	# Get the component that you want to have focus as a result of this event
	nextFocusComponent = # Put the relative path to the component you want to have focus here
	#nextFocusComponent = event.source.parent.getComponent('Text Field 2') #Example

	# Give the desired component focus
	nextFocusComponent.requestFocusInWindow()

```

_Edit: added a clear example of a relative component path in the code comments_

---

<div class="post-metadata">

**Author:** ![Alfredo\_Egmo](https://avatars.discourse-cdn.com/v4/letter/a/ccd318/32.png) [@Alfredo\_Egmo](https://forum.inductiveautomation.com/u/Alfredo_Egmo)\
**Post date:** [October 13, 2023, 2:09pm UTC](https://forum.inductiveautomation.com/t/focus-and-tab-order/80364/7 "2023-10-13T14:09:00Z")

</div>

Thank you

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [October 25, 2023, 7:20am UTC](https://forum.inductiveautomation.com/t/focus-and-tab-order/80364/8 "2023-10-25T07:20:52Z")

</div>

I had forgot about this:  
[Features and Ideas: Tab Order for Components](https://inductiveautomation.canny.io/ignition-features-and-ideas/p/tab-order-for-components)

There was already an idea request for this feature _which I had at some point voted for_, and the ideas page says that it is now planned. I encountered it [again] today when I was browsing the ideas site to see if there was anything I wanted to vote on, and when I saw it, I remembered this post.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [October 25, 2023, 3:04pm UTC](https://forum.inductiveautomation.com/t/focus-and-tab-order/80364/9 "2023-10-25T15:04:52Z")

</div>

Note that it's planned for Perspective, where: 1. the underlying focus traversal system is opaque to you and not exposed the way it is in Vision, and 2: where there's already a native `tabIndex` property on DOM elements we can expose directly or indirectly.
