How to Properly use TabIndexManager

[zhene]

Hello,

I have a few DynamicForms that need some custom tabbing operations and I am wondering if TabIndexManager is what I should use.

I have four DynamicForms in a HLayout with two FormItems each.

When I tab, it goes form by form rather then top to bottom (which is to be expected). I want it to go from top to bottom. Would the TabIndexManager be my solution on solving this and if so how?

TEST CASE:

final HLayout mainLayout = new HLayout();
mainLayout.setAutoHeight();
mainLayout.setWidth100();

final DynamicForm form1 = new DynamicForm();
form1.setDataSource(DATASOURCE);
form1.setAutoWidth();
form1.setAutoHeight();
form1.setTitleOrientation(TitleOrientation.TOP);
form1.setFields(new FormItem(NAME), new FormItem(NAME_2));

final DynamicForm form2 = new DynamicForm();
form2.setDataSource(DATASOURCE);
form2.setAutoWidth();
form2.setAutoHeight();
form2.setTitleOrientation(TitleOrientation.TOP);
form2.setFields(new FormItem(NAME), new FormItem(NAME_2));

final DynamicForm form3 = new DynamicForm();
form3.setDataSource(DATASOURCE);
form3.setAutoWidth();
form3.setAutoHeight();
form3.setTitleOrientation(TitleOrientation.TOP);
form3.setFields(new FormItem(NAME), new FormItem(NAME_2));

final DynamicForm form4 = new DynamicForm();
form4.setDataSource(DATASOURCE);
form4.setAutoWidth();
form4.setAutoHeight();
form4.setTitleOrientation(TitleOrientation.TOP);
form4.setFields(new FormItem(NAME), new FormItem(NAME_2));

mainLayout.addMembers(form1, form2, form3, form4);

Regards

[Isomorphic]

For multiple reasons (including mobile support, speed and compliance with accessibility standards), we would recommend using a single form here instead of an HLayout of separate forms. That will solve your tab order issue as well.

If you are totally stuck with this mode of rendering and it can't be changed, you can use editorExit events to force the focus to move as you intend. But again this is worse in every way as compared to what we have recommended.

[zhene]

Thanks for the reply.

The reason we use four forms is because the criteria is different for each form.

[Isomorphic]

We're not sure quite what that means - perhaps you are having each form do a separate fetch of data? but again there are multiple reasons why a single form would be better here, so you may be best off refactoring other logic so you can have the simplified form structure.