Table Keyboard Navigation and Row Focus

Hello All,

I have a problem with my tables where the keyboard navigation has some sort of bug where the row cursor (or focus, which is the dotted region that usually accompanies the selection) goes to the beginning of the table when I select something after the second or third row…

So the behaviour is somewhat like this:

  1. Select the first row
  2. Using the keyboard or even the mouse select another row below.
  3. The selection stays on the selected row but the cursor goes to the first row.
  4. After this the keyboard navigation starts on the first row again instead of staying on the selected row.

This way I cant navigate on the whole table. On the book of vaadin it is said that on Editable mode there are some problems with the navigation but on my tables I am not on editable mode. I thought that it had something to do with the setPropertyDataSource that it happens when I add it to a Form but even after overriding it some tables still had the problem.

I am having problems to give any more details about this because during the debug phase everything is ok and i dont know the relationship between server processing and the row focus and how it is controlled server-side.

I was aiming for someone that had the same problem and could help me with it.

Thanx a lot


I’ve had this issue with the TreeTable a while back, but never with the Table component. It seems that in the
this works fine, so the issue is probably within your code.

  • Do you have any ValueChangeListeners that modify the table or its container in any way? These could cause the focus to be lost.
  • Could you post a short example of your code in which this issue happens. Having the code would make seeing the problem a lot easier.


I dont have any valuechanges like that.The table works allright if I dont try to relate it with a ContainerDataSource or PropertyDataSource, like some of the examples on the Sampler. On a treetable this problem still happens in conjunction with this one:
. I dont know if they can be related.

Here is a swf where you can see the problem happening (dont mind the quality… just check how the selection and focus behave):
. I am only able to pass the 3rd line because I have the table wrapped on a Panel with Action Handler for the up and down keys, which selects the previous or the next item on the table. WIthout that I would be stuck on the first 3 lines when using keyboard navigation.


Finally I developed this miniapp where I found out that calling the setPropertyDataSource on a table messes with its navigation. More or less with the same effect that I displayed on the last post. This time, without the SetPropertyDataSource and with the ValueChangeEvent everything works ok. The other way around the selection jumps from the before last line to the second line unless I click on the mext button without taking the finger of it.

Heres the code:

public class MyApplication extends Application {

	public void init() {
		Window mainWindow = new Window("MyApplication");

		List<MyItem> parents = new ArrayList<MyItem>();
		List<MyItem> children = new ArrayList<MyItem>();
		for (int i = 0; i < 10; i++)
			parents.add(new MyItem("pai" + i, i, null));
		for (int i = 0; i < 100; i++) {
			MyItem item = new MyItem("filho" + i, i, new ArrayList<MyItem>());
			item.setParent(parents.get(i / 10));
			parents.get(i / 10).getChildren().add(item);
		//Container c = new Container(parents, children);
		Table t = new Table("Teste");
		t.addContainerProperty("nome", String.class, "");
		t.addContainerProperty("index", Integer.class, 0);
		t.addContainerProperty("parent", MyItem.class, null);
		for (int i = 0; i < 100; i++)
			t.addItem(new Object[]{
						children.get(i).getNome(), children.get(i).getIndex(), children.get(i).getParent()
					}, i);
		final TextField f = new TextField("Nome");
//		t.addListener(new ValueChangeListener() {
//			public void valueChange(ValueChangeEvent event) {
//				f.setValue(event.getProperty().getValue());
//			}
//		});