REQUIRED INFORMATION

Ext version tested:
  • Ext 4.1.2
Browser versions tested against:
  • Firefox (latest w/ Firebug)
  • Chrome (latest)
DOCTYPE tested against:
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Description:
  • If you have a ComboBox with a 'select' event attached, the event will be triggered if you type in a value and tab off the field. If you type in a value and use the mouse to select another field (or just click off the field), the select event will not be fired.
Steps to reproduce the problem:
  • Open the example provided
  • Type in "Alaska" into the combo box field and tab off the field
  • Notice the message box showing the event has fired
  • Now type "Alabama" into the dropdown and instead of tabbing off the field, click somewhere else on the screen with the mouse
  • Notice the event is not fired. So it is possible to enter a valid value from the dropdown but have no way to trap that event if the user uses the mouse to move off the combo box
The result that was expected:
  • The 'select' event should be fired
The result that occurs instead:
  • No 'select' event is fired
Test Case:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Combo Box Issue</title>


        <link rel="stylesheet" type="text/css" href="../extjs4/resources/css/ext-all.css" />


        <script type="text/javascript"  src="../extjs4/ext-debug.js"></script>




        <script type="text/javascript">
            Ext.require('Ext.form.*');


            Ext.onReady(function() {
                Ext.tip.QuickTipManager.init();
                
                var states = Ext.create('Ext.data.Store', {
                    fields: ['abbr', 'name'],
                    data : [
                        {"abbr":"AL", "name":"Alabama"},
                        {"abbr":"AK", "name":"Alaska"},
                        {"abbr":"AZ", "name":"Arizona"},
                        {"abbr":"NC", "name":"North Carolina"},
                        {"abbr":"SC", "name":"South Carolina"}
                    ]
                });


                var form = Ext.createWidget('form', {
                    renderTo:  Ext.getBody(),
                    title: 'Combo box test',
                    bodyPadding: 5,
                    frame: true,
                    width: 340,
                    fieldDefaults: {
                        labelAlign: 'left',
                        labelWidth: 105,
                        anchor: '100%'
                    },
                    items: [{
                            xtype: 'combo',
                            fieldLabel: 'Combo Box:',
                            name: 'cb1',
                            forceSelection: true,
                            displayField: 'name',
                            valueField: 'abbr',
                            store: states,
                            queryMode: 'local'
                        },
                        {
                            xtype: 'textfield',
                            fieldLabel: 'Text Field:',
                            name: 'tf1'
                        }
                    ]                    
                });
                
                var selectEvent = function() {
                    alert('Event Fired');
                }
                
                var combobox = form.down('combo');
                combobox.on('select', selectEvent, this);
            });
        </script>
    </head>


    <body>
    </body>
</html>
HELPFUL INFORMATION

Debugging already done:
  • I have stepped through code (including beforeBlur), but the events for firing 'select' seem to be tied only to clicking on a combo box item and a keyboard event for tabbing off the field.
Possible fix:
  • not provided
Operating System:
  • Windows 7 Enterprise