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

2
votes

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?

1
javascriptextjscombobox

1 Answers

1
votes

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);
    }
});