Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    928
    Vote Rating
    49
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default [4.1.3] ComboBox select method when assert is true

    [4.1.3] ComboBox select method when assert is true


    Hi,

    Just been tracking down an bug involving comboboxes, and tracked it to the following method in ComboBox:
    Code:
        /**
         * Selects an item by a {@link Ext.data.Model Model}, or by a key value.
         * @param {Object} r
         */
        select: function(r, /* private */ assert) {
            var me = this,
                picker = me.picker,
                doSelect = true;
            
            if (r && r.isModel && assert === true) {
                if (picker) {
                    doSelect = !picker.getSelectionModel().isSelected(r);
                }
                
                if (doSelect) {
                    me.fireEvent('select', me, r);
                }
            }
            me.setValue(r, true);
        },
    Firstly, the contract for the select event is wrong, it has to take an Array not an object, and secondly in any select listeners the field value will not be set in time.

    Here's my fixed version:
    Code:
                select: function(r, /* private */ assert) {
                    var me = this,
                        picker = me.picker,
                        doSelect = true;
    
    
                    if (r && r.isModel && assert === true) {
                        if (picker) {
                            doSelect = !picker.getSelectionModel().isSelected(r);
                        }
    
    
                        if (doSelect) {
                            // <WestyFix>
                            r = Ext.Array.from(r);
                            me.setValue(r, true);
                            // </WestyFix>
    
    
                            me.fireEvent('select', me, r);
                        }
                    // <WestyFix>
                    } else {
                        me.setValue(r, true);
                    }
                    // </WestyFix>
                }
    The issue manifests itself if you type enough characters to match a value in a combobox then click on a different field. Don't tab, and don't select the item with the mouse, just move to a different field.

    Hope this makes sense.

    Cheers,
    Westy
    Product Architect
    Altus Ltd.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What is the actual bug? I have this test and it seems to be working for me but not sure I'm understanding what the bug is:

    Code:
    new Ext.form.Panel({
        renderTo : document.body,
        items    : [
            {
                xtype      : 'textfield',
                fieldLabel : 'One'
            },
            {
                xtype          : 'combobox',
                fieldLabel     : 'Two',
                queryMode      : 'local',
                forceSelection : true,
                store          : {
                    fields : ['text'],
                    data   : [
                        { text : 'One' },
                        { text : 'Two' },
                        { text : 'Three' }
                    ]
                }
            },
            {
                xtype      : 'textfield',
                fieldLabel : 'Three'
            },
            {
                xtype      : 'textfield',
                fieldLabel : 'Four'
            },
            {
                xtype      : 'textfield',
                fieldLabel : 'Five'
            },
            {
                xtype      : 'textfield',
                fieldLabel : 'Six'
            },
            {
                xtype      : 'textfield',
                fieldLabel : 'Seven'
            },
            {
                xtype      : 'textfield',
                fieldLabel : 'Eight'
            },
            {
                xtype      : 'textfield',
                fieldLabel : 'Nine'
            },
            {
                xtype      : 'textfield',
                fieldLabel : 'Ten'
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    928
    Vote Rating
    49
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    Hi Mitchell,

    No, I don't think you fully understood.

    Try this:
    Code:
        new Ext.form.Panel({
            renderTo : document.body,
            items    : [
                {
                    xtype      : 'textfield',
                    fieldLabel : 'One'
                },
                {
                    xtype          : 'combobox',
                    fieldLabel     : 'Two',
                    queryMode      : 'local',
                    forceSelection : true,
                    typeAhead      : true,
                    displayField   : 'text',
                    valueField     : 'value',
                    store          : {
                        fields : ['text', 'value'],
                        data   : [
                            { text : 'One', value: 1 },
                            { text : 'Two', value: 2 },
                            { text : 'Three', value: 3 }
                        ]
                    },
                    listeners: {
                        select: {
                            fn: function(field, records, opts) {
                                if (!records) {
                                    Ext.global.console.log('records is falsey', records, 'getValue()', field.getValue());
                                } else if (Ext.isArray(records)) {
                                    Ext.global.console.log('records is an Array', records, 'getValue()', field.getValue());
                                } else {
                                    Ext.global.console.warn('records is NOT an Array', records, 'getValue()', field.getValue());
                                }
                            }
                        }
                    }
                },
                {
                    xtype      : 'textfield',
                    fieldLabel : 'Three'
                },
                {
                    xtype      : 'textfield',
                    fieldLabel : 'Four'
                },
                {
                    xtype      : 'textfield',
                    fieldLabel : 'Five'
                },
                {
                    xtype      : 'textfield',
                    fieldLabel : 'Six'
                },
                {
                    xtype      : 'textfield',
                    fieldLabel : 'Seven'
                },
                {
                    xtype      : 'textfield',
                    fieldLabel : 'Eight'
                },
                {
                    xtype      : 'textfield',
                    fieldLabel : 'Nine'
                },
                {
                    xtype      : 'textfield',
                    fieldLabel : 'Ten'
                }
            ]
        });
    1) Type part of value and tab - FINE
    2) Click trigger and pick value - FINE
    3) Type start of value and click on another field - BROKEN; records is an object rather than an array, and getValue returns the text from the record not the value.

    Then try it with my fix.

    Cheers,
    Westy
    Product Architect
    Altus Ltd.

  4. #4
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    928
    Vote Rating
    49
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    Still an issue in 4.2.1.744
    Product Architect
    Altus Ltd.

Thread Participants: 1

Tags for this Thread