Open button menu suppresses the focus event of an unrelated field

**jmcclelland** · 6 Sep 2011 7:04 AM

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

Description:

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

Code:

<html>
    <head>

        <!-- ************* 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>
    <head>
    <body>

        <br/>
        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:

        <ul>
        <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>
        </ul>
        <br/>

        <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 Ext.menu.Menu({
                    items:menuItems
                });

                var button = new Ext.Button({
                    renderTo: Ext.getBody(),
                    text: 'Just a button',
                    menu: buttonMenu
                });*/

                // ************* 4.0 *************

                Ext.create('Ext.form.field.Text',{
                    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
                });
            });
        </script>
    </body>
</html>

Steps to reproduce the problem:

Click on the button, while the menu is visible click on the plain text field, press the delete key
Click on the button, while the menu is visible click on the Extjs text field
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:

Delete key should delete text
Blue high light should be visible and the empty text should disappear
Text should be selected

The result that occurs instead:

Delete key does not delete text
Blue high light is not visible and the empty text does not disappear
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

Code:

    // 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 = Ext.menu.Menu.prototype.hide;
        
        // Override the original function.
        Ext.override(Ext.menu.Menu, {
            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);
            }
        });
    })();

**walker2287** · 9 Mar 2012 12:46 PM

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.

Open button menu suppresses the focus event of an unrelated field

Thread Tools

Search Thread

Display

Open button menu suppresses the focus event of an unrelated field

Open button menu suppresses the focus event of an unrelated field