Combo box type-ahead filtering remembers filter even after combo box is closed

**dpchrist** · 28 Aug 2012 1:33 PM

REQUIRED INFORMATION

Ext version tested:

Ext 4.1.1

Browser versions tested against:

FF15 (Firebug 1.10.2 installed)
Chrome (latest update)

DOCTYPE tested against:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Description:

When typing in a value to a combobox (with local filtering), the list of values is filtered in the store as you type. However, the store filter is maintained after a value is chosen and the combobox list is closed. Because of this, you cannot programmatically (using setValue()) set the combo box to another valid value unless it happened to be in the last filtered list before the combo box was closed.

Steps to reproduce the problem:

Run the attached code sameple
Click the button to see that the code will select 'South Carolina' in the combo box
Type and 'A' into the combo box to see it filter for 3 states that start with 'A' and choose one of those values
Click on the button again and it will blank out the list instead of setting it to 'South Carolina'.
Click to open the combo box, close it, then click the button again and it will work because opening the list clears combox box store filter.

The result that was expected:

Once a value has been selected from the combo box and it has been closed, the store filter should be cleared. This will make setValue() calls works for any valid value in the combo box store.

The result that occurs instead:

The combo box is blanked out even though a valid value is specified in the setValue() call.

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 setValue() 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: 'button',
                            text: 'Change Dropdown to South Carolina',
                            handler: function(btn) {
                                var vForm = btn.up('form');
                                vForm.getForm().findField('cb1').setValue('SC');
                            }
                        }
                    ]                    
                });                
            });
        </script>
    </head>


    <body>
    </body>
</html>

HELPFUL INFORMATION

Debugging already done:

Verified that the type-ahead filtering on the store is maintained even after the combo box value has been chosen and the combo box is closed.

Possible fix:

The only workaround I have is to call comboboxfield.getStore().clearFilter() before every setValue() call. But that is inefficient and should not be required.

Operating System:

Windows 7

**mitchellsimoens** · 29 Aug 2012 5:33 AM

Thanks for the report.

**maikhorma** · 15 Oct 2012 11:53 AM

I ran into this issue as well. My workaround is similar, but I attach to the "beforequery" event. Do we have any other (hopefully better) options?

Code:

Ext.define('MyClass', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.reusable_select',


  //... all properties....


    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            listeners: {
                beforequery: {
                    fn: me.clearFilter,
                    scope: me
                }
            }
        });


        me.callParent(arguments);
    },


    clearFilter: function(queryEvent, options) {
        if(queryEvent){
            queryEvent.combo.getStore().clearFilter();
        }


    }


});

Combo box type-ahead filtering remembers filter even after combo box is closed

Thread Tools

Search Thread

Display

Combo box type-ahead filtering remembers filter even after combo box is closed

Combo box type-ahead filtering remembers filter even after combo box is closed

Tags for this Thread