Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default Combo-Box blur event getting fired twice

    Combo-Box blur event getting fired twice


    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>

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,640
    Vote Rating
    582
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default Could you share the browsers you checked in

    Could you share the browsers you checked in


    Quote Originally Posted by evant View Post
    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.

Thread Participants: 1

Tags for this Thread