Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-4072 in a recent build.
  1. #1
    Sencha User
    Join Date
    Sep 2011
    Vote Rating
    jmcclelland is on a distinguished road


    Default Open button menu suppresses the focus event of an unrelated field

    Ext version tested:
    • Ext 3.2.1
    • Ext 3.4.0
    • Ext 4.0.2 rev a
    Adapter used:
    • ext
    css used:
    • only default ext-all.css
    Browser versions tested against:
    • IE 7
    • IE 8
    • IE 9
    • FF 3.6 (firebug 1.7.3 installed)
    • Chrome 13.0
    Operating System:
    • Win 7
    • WinXP Pro
    • The problem only occurs in IE 7, 8 and 9. When a button with a menu has been pressed and the menu is visible, if the user then clicks on a text input field while the menu is still open, the process of closing the menu via Menu.hide(), which is called by the event handler for the mousedown event in menu manager, seems to consume the following focus event and it does not get propagated to the text input field.
    • The problem occurs for manually created <input type="text"> tags and Extjs TextField as well.
    Test Case:

    This code below contains an example for both 3.x and 4.x, the 3.x is commented out currently

            <!-- ************* 3.4 ************* -->
            <!--link type="text/css" rel="stylesheet" href="ext-3.4.0/resources/css/ext-all.css" />
            <script language="javascript" src="ext-3.4.0/adapter/ext/ext-base-debug.js"></script>
            <script language="javascript" src="ext-3.4.0/ext-all-debug.js"></script-->
            <!-- ************* 4.0 ************* -->
            <link type="text/css" rel="stylesheet" href="ext-4.0.2a/resources/css/ext-all.css" />
            <script language="javascript" src="ext-4.0.2a/ext-all-debug.js"></script>
            Instructions: In IE click on the button and then click on either the plain or Extjs text field in the middle of the text and try pressing the delete key.
            Also note that:
            <li>&nbsp;&nbsp;1. onfocus alert for the plain text field does not appear</li>
            <li>&nbsp;&nbsp;2. the empty text does not disappear from the Extjs text field</li>
            <li>&nbsp;&nbsp;3. if the Extjs text field contains text it does not get selected</li>
            <li>&nbsp;&nbsp;4. the blue border surrounding the Extjs text field is not lit</li>
            <input type="text" onfocus="alert('text field is in focus')" value="some text"/>
            <script type="text/javascript">
                Ext.onReady(function() {
                    var menuItems = new Array();
                    menuItems.push({ text: 'item 1'});
                    menuItems.push({ text: 'item 2'});
                    menuItems.push({ text: 'item 3'});
                    // ************* 3.4 *************
                    /*var textField = new Ext.form.TextField({
                        renderTo: Ext.getBody(),
                        name: 'name',
                        width: '150',
                        emptyText: 'empty text placeholder',
                        selectOnFocus: true
                    var buttonMenu = new{
                    var button = new Ext.Button({
                        renderTo: Ext.getBody(),
                        text: 'Just a button',
                        menu: buttonMenu
                    // ************* 4.0 *************
                        renderTo: Ext.getBody(),
                        name: 'name',
                        width: '150',
                        emptyText: 'empty text placeholder',
                        selectOnFocus: true
                    Ext.create('Ext.Button', {
                        text      : 'Just a button',
                        renderTo  : Ext.getBody(),
                        menu      : menuItems
    Steps to reproduce the problem:
    1. Click on the button, while the menu is visible click on the plain text field, press the delete key
    2. Click on the button, while the menu is visible click on the Extjs text field
    3. Enter some text into the Extjs text field, click on the button, while the menu is visible click on the Extjs text field
    The result that was expected:
    1. Delete key should delete text
    2. Blue high light should be visible and the empty text should disappear
    3. Text should be selected

    The result that occurs instead:
    1. Delete key does not delete text
    2. Blue high light is not visible and the empty text does not disappear
    3. Text is not selected
    Debugging already done:
    • The solution was to delay the function Menu.hide() by 1ms thus allowing the text input to receive the focus event.

    Possible fix:
    • For my fix I overrode Menu.hide() function so as not to modify the original
    • The code below overrides that method, but it actually waits 1ms then calls the original, so no code from the original function was copied. This allows us to port the fix to 4.x in the future, should we need to
        // The anonymous function wrapped in a closure executes right away which allows us to keep the reference to the original
        // function before it is overridden.
        (function() {
            // Get a reference to the original function.
            var origHide =;
            // Override the original function.
            Ext.override(, {
                hide: function(){
                    // Used another anonymous function here because you can't do: origHide.apply.defer(...)
                    var executeOrigHide = function() {
                        origHide.apply(this, arguments);
                    // defer the execution by 1ms.
                    executeOrigHide.defer(1, this);

  2. #2
    Sencha User
    Join Date
    Aug 2011
    Franklin, TN
    Vote Rating
    walker2287 is on a distinguished road



    but your fix breaks the menus for columns in a grid? how is that a viable solution if it causes more issues elsewhere. go to a grid. hide a column through the column header menu and then try to reopen that column menu. it doesnt work.

Thread Participants: 1