CODEWITHSUNDEEP
javascriptextjscombobox
gdc
gdc

Reputation: 23

ExtJS ComboBox (configured with queryMode remote and forceSelection true) automatically clears input field

The component Ext.form.field.ComboBox configured with queryMode "remote" and forceSelection true automatically clears its input field after searching the store.

{
    xtype: 'combobox',

    fieldLabel: 'State',

    forceSelection: true,
    queryMode: 'remote',
    displayField: 'name',
    valueField: 'id',
    typeAhead: true,
    minChars: 0,

    store: {
        model: 'ComboTest.State',
        pageSize: 100,

        proxy: {
            type: 'ajax',
            url: 'states.js',
            reader: {
                type: 'json',
            }
        }
    },

    allowBlank: false

}

You can try this fiddle: https://fiddle.sencha.com/#fiddle/uaq

Insert, for example, "w", the combobox selects "Washington", then go on inserting "y" (for example you want "Wyoming"), at this point everything gets cleared.

Am I doing something wrong or is it a bug?

Upvotes: 2

Views: 1657

Answers (1)

Levan
Levan

Reputation: 76

That is a common bug which was in extjs 5 and I guess is present in extjs 6.

You can override combobox behavior: 

Ext.define('overrides.form.ComboBox', {
    override: 'Ext.form.ComboBox',
    onLoad: function (store, records, success) {
        var me = this,
        needsValueUpdating = !me.valueCollection.byValue.get(me.value);
        if (success && needsValueUpdating && !(store.lastOptions && 'rawQuery' in store.lastOptions)) {
            me.setValueOnData();
        }
    },
    beforeBlur: function () {
        var me = this;
        if (me.getRawValue().length === 0 || (me.getValue() == null && this.forceSelection)) {
            me.reset();
            me.lastSelection = [];
        }
        me.callParent(arguments);
    }
});

Upvotes: 1

Related Questions