Tab from input to input in CellTable

Question

I have a CellTable with a bunch of cells that render to <input> tags. Tabbing between the inputs is broken because of CellTable's fancy event processing. It seems that tab inspires each cell to finishEditing, but that in turn hogs the focus and the focus never gets to the next <input>.

Setting tabIndex on each input does not seem to affect the behavior.

How can I restore the usual tabbing functionality?

Answer 1

I recently figured this out. Annoying, but simple once you find the magic.

1. Create a new Cell type to use in your table, as the stock TextInputCell specifies a tab index of -1. Basically do everything that TextInputCell does, but dont specify any tab index in your template.
2. Disable the default keyboard navigation on your CellTable. cellTable.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.DISABLED)

This should result in a normal tab navigation in your CellTable.

Answer 2

Disabling KeyboardSelectionPolicy may not work on all views, if you are using any MVP frameworks. GWT selects the cell instead of the input field within the cell.

Here is a solution which I used in my applications: Adding TAB control to GWT CellTable

Answer 3

the solution from Ben Imp works fine if you dont change the value of the cell, but if you change the value and try to navigate with tab to the next cell it lost focus and starts with the first element of the view. I have not found a solution for this inappropriate behaviour.

Answer 4

For those looking at this in the future trying to figure out how to have tabbing while changing values, do what the Ben Imp suggests then also in your custom components remove any reference to super.finishEditing. In some cases this means overriding finishEditing and having it do nothing.