ComboBox select event not fired when leaving field using mouse click

**dpchrist** · 26 Nov 2012 6:47 AM

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

**mitchellsimoens** · 26 Nov 2012 8:55 AM

I cannot reproduce this issue with 4.1.3

**dpchrist** · 26 Nov 2012 2:30 PM

Thanks for looking into it. We are two weeks from a release and 4.1.3 broke many things in our build when we tried to upgrade, so we can't do that yet. I'll try to do some source code compares to see what has changed and put in some overrides to fix the issue until we can move to 4.1.3.

**dpchrist** · 27 Nov 2012 4:58 AM

I found the changes I needed to add overrides but actually discovered that the issue was only halfway fixed in 4.1.3. While the event does fire now, the combo box value is not being set for this scenario.

Change the selectEvent() function in the example to the following:

Code:

				var selectEvent = function(field) {
					alert(field.getValue());
				}

Notice that when choosing a value with the mouse, or typing in and tabbing off the field, the value shown will be the correct state code. When you type in the value and click off the field, the event does now fire; however, the state code is not being shown, it instead just shows the state name.

**dpchrist** · 29 Nov 2012 5:11 AM

What are the steps to get this issue looked at again with the new information I provided?

**dpchrist** · 20 Feb 2013 8:33 AM

Because no one followed up on this report, I had to submit this issue through our support subscription. Once support looked at it, they classified it as a bug and filed Jira EXTJSIV-8006 to get it fixed.

ComboBox select event not fired when leaving field using mouse click

Thread Tools

Search Thread

Display

ComboBox select event not fired when leaving field using mouse click

ComboBox select event not fired when leaving field using mouse click

Tags for this Thread