Combobox values are disappearing on typing

Question

Using extjs 5.1.3 version. I have a typeAhead combobox in the form as below:

Combobox store:

Ext.define('MyApp.view.myobj.field.CustomObject', {
    extend:'Ext.form.field.ComboBox',
    xtype: 'cstmObject',
    requires: [
        'MyApp.model.myobj.CustomObject'
    ],
    fieldLabel: 'Custom Object Name',
    displayField: 'name',
    valueField: 'name',
    queryMode: 'remote',
    selectOnFocus: false,
    typeAhead: true,
    hideTrigger: true,
    minChars: 1,
    queryCaching : false,
    store:{
        model: 'MyApp.model.myobj.CustomObject'
    }
}

Below is snippet in form:

{
    xtype: 'cstmObject',
    fieldLabel: 'Custom Object Name',
    allowBlank: false,
    maxLength: 5,
    enforceMaxLength: true,
    bind: '{customObject.row}'
}

On typing the value in combobox sometimes dropdown values are displaying and sometimes not showing for the input. When I observe network panel, store is loading properly from server.

What are possible client side issues for not showing dropdown values when store is loading properly from server ?

Update: I found a pattern for the issue i.e. if an exact match of record is found in the dropdown list with the typed value, then only dropdown values are disappearing. (e.g. if I type alphabet A and if there is a record with value A then dropdown values are disappearing. If I type a then dropdown will not be disappear since there is no record with lowercase a).

What are required configurations I need to provide to fix this ?

Answer 1

Seems like this is a bug in Ext 5.1

This happens only when the component is bound to a model.

Here is Fiddle to reproduce this issue. Type A you will see the results and when you type A1 (which is present in the store), the results will be hidden.

Logged a bug in Ext 5 Forum

Update

Here is a fix that i came up with.

Ext.define('MyApp.overrides.form.field.ComboBox', {
    override: 'Ext.form.field.ComboBox',

    /**
     * Fix for EXTJS-19274
     */
    setValue: function(value) {
        var me = this;

        // This is the value used to forceSelection in assertValue if an invalid value is left
        // in the field atcompleteEdit. Must be cleared so that the next usage of the field
        // is not affected.
        me.lastSelectedRecords = null;

        // Value needs matching and record(s) need selecting.
        if (value != null) {
            // Only go through text/record matching if there's a change.
            if (value !== me.getRawValue()) {
                me.doSetValue(value);
            }
        }
        // Clearing is a special, simpler case.
        else {
            me.suspendEvent('select');
            me.valueCollection.beginUpdate();
            me.pickerSelectionModel.deselectAll();
            me.valueCollection.endUpdate();
            me.resumeEvent('select');
        }
        return me;
    }
});