View Full Version : ComboBox in EditorGrid TAB/ENTER behaviour problem, not setting val or moving column

5 Aug 2010, 1:45 PM
Hi all,

I'm feeling a bit dumb and stumped on this one, so hopefully someone wiser can point me in the right direction.

I have a timesheet application that looks a bit like an excel spreadsheet, it uses an EditorGrid with two ComboBoxs (local stores) per row, then a text field for numerical values for each day of the week.

I've been having trouble with the typeahead/autocomplete sometimes selecting the wrong thing altogether, it seems to have to do with the pace/cadence of typing and occurs ~25% of the time. So, I've turned ComboBox->autoSelect to false.

Now, when the user types in the first few characters, the comboBox filters nicely, but when you use the up/down arrows to select a valid value and press:

TAB: it moves to the next cell in the row, without setting the selection into the ComboBox
ENTER: puts the right value into the combo box, but moves down one row (due to RowSelectionModel->moveOnEnter=true).

What I want is that when the up/down keys are used to select the correct value, and either TAB or ENTER is pressed, that the ComboBox is properly populated and the focus moves to the next cell to the right in the grid and on the same row.

I am late leaving work, and the JS is huge, so if necessary tomorrow I can try and create a smaller example showing this behavior.

Any pointers much appreciated.


5 Aug 2010, 3:54 PM

Try that.

6 Aug 2010, 12:05 AM
The fact that Tab doesn't store the value has been reported in the Bugs section. IIRC that thread also contains a suggested patch.

6 Aug 2010, 1:40 PM
Thanks guys, Condor you were quite right, found it and put the little fix in for the TAB key. I tried the same for the enter key, it takes the value, but still does not move to the next column properly. The rowSelectionModel->moveOnEnter is set to false. Any ideas?

afterrender: function(component) {
component.keyNav.tab = function() {
component.keyNav.enter = function() {