REQUIRED INFORMATION

Ext version tested:
  • Ext 4.2.1 beta
Browser versions tested against:
  • Chrome
  • IE9
DOCTYPE tested against:
  • <!DOCTYPE html>
Description:
  • A ComboBox as a grid's editor doesn't fire its blur event on Tab key, because a CellEditing plugin calls "e.stopEvent()" on Tab. Probably, a ComboBox should call its triggerBlur method in its onEditorTab method.
Steps to reproduce the problem:
  • Start editing
  • Press Tab
The result that was expected:
  • "blur" in the console
The result that occurs instead:
  • Nothing in the console, because the blur event doesn't fire.
  • It fires, for example, on Enter key
Test Case:

Code:
<!DOCTYPE html>
<html>
<head>
    <title>ComboBox as a grid's editor doesn't fire the blur event on Tab key</title>

    <link rel="stylesheet" href="../resources/css/ext-all.css" />
    
    <script src="../ext-all-debug.js"></script>

    <!-- A possible fix -->

    <!--<script>
        Ext.form.field.ComboBox.override({
            onEditorTab: function(e){
                var keyNav = this.listKeyNav;

                if (this.selectOnTab && keyNav) {
                    keyNav.selectHighlighted(e);
                }

                this.triggerBlur(); // added
            }    
        });
    </script>-->

    <script>
        Ext.onReady(function () {
            Ext.create("Ext.grid.Panel", {
                renderTo: Ext.getBody(),
                store: {
                    fields: [{
                        name: "test"    
                    }],
                    data: [{
                        test: "1",
                    }, {
                        test: "2",
                    }, {
                        test: "3",
                    }]
                },
                columns: [{
                    text: "Test",
                    dataIndex: "test",
                    editor: {
                        xtype: "combobox",
                        listeners: {
                            blur: function () {
                                console.log("blur");
                            }
                        }
                    }
                }],
                plugins: {
                    ptype: "cellediting"
                }
            });
        });
    </script>
</head>
<body>

</body>
</html>


HELPFUL INFORMATION


Possible fix:

Code:
Ext.form.field.ComboBox.override({
    onEditorTab: function(e){
        var keyNav = this.listKeyNav;

        if (this.selectOnTab && keyNav) {
            keyNav.selectHighlighted(e);
        }

        this.triggerBlur(); // added
    }    
});