View Full Version : splitbutton grid toolbar textfield - no space key!

29 May 2015, 4:13 AM
In ExtJS 4.2.2 (and also 4.2.1), while typing in a textfield inside a toolbar inside a grid inside a splitbutton menu inside a viewport, I can't type a space.


In ExtJS 5.1.1, I can use the space key to type a space.

I can't upgrade to Ext 5.1.1 (or even 4.2.3) easily because of compatibility issues, so I will have to backport the fix.

Do you know where I would have to look for the bugfix?

-> When I remove the splitbutton and menu, and put the grid directly into the viewport, it works.
-> When I remove the grid, and put the textfield directly into the splitbutton menu, it also works.

So, where exactly is the spacebar press event caught?

29 May 2015, 4:56 PM
The first step in investigating this is to simplify your test case. Something like this:


No grid, no button... just two textfields in a menu. One works, the other doesn't, and the only difference is that one is wrapped in a container.

The menu seems the most likely guilty party so the next step is to bang open the source code in the docs:


My suspicion was that form fields might have special handling within a menu, so I did a text search for 'field'. One hit, for enableKeyNav. A quick read of the relevant docs suggest how to fix your problem.

Digging further, have a search to see how enableKeyNav is actually used. Seems the 'magic' is in Ext.menu.KeyNav, so that's where we go next:


From a quick read it's clear that there's special handling for space and enter when form fields are involved. Wrapping the form field in a container prevents the keynav from recognising it as a form field... mystery solved.

Hope that helps.

30 May 2015, 3:44 AM
Very well done. I also tried to simplify the test case, but didn't manage to find a simplification which still exhibited the problem. You found one. Thank you very much.