Combo-Box blur event getting fired twice

**netemp** · 13 Oct 2011 4:30 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.0.2a

Browser versions tested against:

IE8
IE9
FF6
Chrome 14

Description:

Combo-Box 'blur' event gets fired again on mouse click, even when it had already been fired because of using 'tab key' to move cursor out of that combo-box

Steps to reproduce the problem:

Create a form with combo-box inside and write a 'blur' event for this combobox
After selecting a value from the combo-box and click 'tab' -> blur event gets fired
Now click anywhere on webpage using mouse -> blur event gets fired again

The result that was expected:

Blur event should not be fired on mouse click if tab key has already been used

The result that occurs instead:

The blur event gets fired twice

Test Case:

Code:

    <html>
        <head>
            <title>Test Page</title>
             <link rel="stylesheet" type="text/css" href="ext-4.0.2a/resources/css/ext-all.css">
             <script type="text/javascript" src="ext-4.0.2a/bootstrap.js"></script>
             
             <script type='text/javascript'>
                            
                Ext.onReady(function(){


                    Ext.define("Post", {
                        extend: 'Ext.data.Model',
                        fields: [
                            {name: 'id', mapping: 'post_id'},
                            {name: 'title', mapping: 'topic_title'},
                            {name: 'topicId', mapping: 'topic_id'},
                            {name: 'author', mapping: 'author'},
                            {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
                            {name: 'excerpt', mapping: 'post_text'}
                        ]
                    });


                    ds = Ext.create('Ext.data.Store', {
                        pageSize: 10,
                        proxy: {
                            type: 'jsonp',
                            url : 'http://www.sencha.com/forum/topics-remote.php',
                            reader: {
                                type: 'json',
                                root: 'topics',
                                totalProperty: 'totalCount'
                            }
                        },
                        model: 'Post'
                    });


                    panel = Ext.create('Ext.panel.Panel', {
                        renderTo: Ext.getBody(),
                        title: 'Search the Ext Forums',
                        width: 600,
                        bodyPadding: 10,
                        layout: 'anchor',
                        items: [{
                            xtype: 'combo',
                            store: ds,
                            displayField: 'title',
                            fieldLabel:'Blur Test',
                            listeners:{
                                blur:function(){
                                    alert('1');
                                }
                            }
                        }, {
                            xtype: 'component',
                            style: 'margin-top:10px',
                            html: 'Live search requires a minimum of 4 characters.'
                        }]
                    });
                });
             </script>
        </head>
        <body>
            
        </body>
    </html>

**evant** · 13 Oct 2011 4:43 AM

Can't confirm this, see the attached screen cap: http://screencast.com/t/yXo1rDLXUSu

Code:

Ext.define("Post", {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        mapping: 'post_id'
    }, {
        name: 'title',
        mapping: 'topic_title'
    }, {
        name: 'topicId',
        mapping: 'topic_id'
    }, {
        name: 'author',
        mapping: 'author'
    }, {
        name: 'lastPost',
        mapping: 'post_time',
        type: 'date',
        dateFormat: 'timestamp'
    }, {
        name: 'excerpt',
        mapping: 'post_text'
    }]
});

Ext.onReady(function(){

    var ds = Ext.create('Ext.data.Store', {
        pageSize: 10,
        proxy: {
            type: 'jsonp',
            url: 'http://www.sencha.com/forum/topics-remote.php',
            reader: {
                type: 'json',
                root: 'topics',
                totalProperty: 'totalCount'
            }
        },
        model: 'Post'
    });
    
    
    var panel = Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        title: 'Search the Ext Forums',
        width: 600,
        bodyPadding: 10,
        items: [Ext.create('Ext.form.field.ComboBox', {
            store: ds,
            displayField: 'title',
            fieldLabel: 'Blur Test',
            listeners: {
                blur: function(){
                    alert('1');
                }
            }
        })]
    });
});

The first alert after a tab, but I don't see an alert after I click.

**netemp** · 13 Oct 2011 8:49 PM

Originally Posted by evant

Can't confirm this, see the attached screen cap: http://screencast.com/t/yXo1rDLXUSu

The first alert after a tab, but I don't see an alert after I click.

Thanks for the quick response Evant. Could you please share the browser you used for testing as its working in Chrome for me too, but giving issues in IE and FF.

Combo-Box blur event getting fired twice

Thread Tools

Search Thread

Display

Combo-Box blur event getting fired twice

Combo-Box blur event getting fired twice

Could you share the browsers you checked in

Could you share the browsers you checked in

Tags for this Thread