Is there a way to set the tab order for input fields on a Lightning Components? Currently the order is across and down through the form and we would like it to go down first and then across.
You cannot directly control the tab order in Lightning any longer. This is documented in the Known Issue.
Please don't use tabindex values aside form 0 and -1.
If you want to change the tab order on the page, change the dom order.
Set the tabindex parameter for each element, such as:
<lightning:input tabindex="10" ... /> <lightning:input tabindex="30" ... /> <lightning:input tabindex="20" ... /> <lightning:input tabindex="40" ... />
(The browser will go to each increasingly higher index on each tab).
Or, you can lay out two blocks side-by-side, going down; this means that the page will tab downwards. That might look like this:
<lightning:layout> <lightning:layoutItem size="6"> <lightning:input ... /> <lightning:input ... /> </lightning:layoutItem> <lightning:layoutItem size="6"> <lightning:input ... /> <lightning:input ... /> </lightning:layoutItem> </lightning:layout>
After much research and trying various approaches, the only way to do this is to sequence the elements in your HTML DOM exactly in the order which you want the tab stops to be.
This means you have to use creative layouts to arrange the elements on the page in one way, where as the actual sequence of declaration in your HTML DOM may be different (and most likely is if you want to set custom tab stops).
Another thing to watch out for, do not set
tabindex="0" on form elements (ie
The input fields automatically are included in the tab sequence.
If you add the attribute then it will add a tabindex on the surrounding xml element which in practice puts two tab stops on your input field.