Tab Order on GridLayout/Form

Hi All,

I have a problem where the tab order is wrong when tabbing through fields that are on a Grid embedded in a form.

	private class FormWithGridLayout extends Form {
		private GridLayout ourLayout;
		public FormWithGridLayout(BeanItem<Person> personBeanItem) {

			// this.setCaption("Step 1 of 4");
			// Create our layout (3x3 GridLayout)
			ourLayout = new GridLayout(3, 13);
			ourLayout.setMargin(true, false, false, true);

			// Set up buffering
			setWriteThrough(false); // we want explicit 'apply'
			setInvalidCommitted(false); // no invalid values in datamodel

			// FieldFactory for customizing the fields and adding validators
			setFormFieldFactory(new PersonFieldFactory());
			setItemDataSource(personBeanItem); // bind to POJO via BeanItem

			// Determines which properties are shown, and in which order:
			setVisibleItemProperties(new Object[] {
					"firstName", "middleInitial", "lastName",
					"phoneHome", "phoneWork", "phoneCell",
					"email", "birthdate",
					"address1", "address2", "city",

As you can see, I have the order of the fields in the setVisibleItemProperties; HOWEVER, when I tab through the fields, when I leave “addressType” the cursor jumps to “city”. It skips address1 and address2.

Any ideas why this is behaving like this?



I don’t know the official answer, but when tabbing goes astray, you can just declare an int tabIndex = 1 and then assuming you are using a Form.setFormFieldFactory() to create your fields, you can each Field.setTabIndex(tabIndex++) to make it explicit.

While I would have expected the tab index to be set by default to the order of the fields created, it appears to not be the case and instead no tab indexes are set and the result is based on the DOM created, which won’t match. But since you can set the tab index, it’s not hard to resolve.

Thanks for the hint. I did what you suggested and it worked. However, it would be nice if it worked as designed. Anyway, I’ll use this approach if I continue to have issues.