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 ?

As you show it, it should work (I tried your code in a [fiddle](https://fiddle.sencha.com/#fiddle/tg7)). Maybe try to reproduce the issue yourself in a fiddle, or post example server responses for both working and broken cases. To me it seems that the issue is server-related. — rixo, Sep 08 '15 at 11:27
Look at the fiddle for jonathan cartwright below. I hade the exact same thing in that fiddle until i used a store for the sata source for the combobox. If you still have it with my fiddle, let me know. — Jonathan cartwright, Sep 11 '15 at 12:07

JChap · Accepted Answer · 2016-03-21T16:16:14.713

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

Jonathan cartwright · Answer 2 · 2015-09-11T11:55:30.733

4

The fiddle fiddle here works in the way you want with the exception that the lit of options come from a store. What I noticed is that I had to tie the combobox directly to a store for it to work without hiding after typing A1.

For other people looking into the other fiddles listed on this issue, if you type A1 very slowly you wont see the behavior. if you type it in the same speed that you would when you are usually writing a post or something that is when you will see the autocomplete disappear with

edited Sep 11 '15 at 11:55

answered Sep 10 '15 at 14:52

Jonathan cartwright

142
6

Issue is happening when we bind it to the model. Without binding there is no issue. Looked at your fiddle, it is not bind to model, so that it is working fine. – Awesome Sep 11 '15 at 16:46

Rifai · Answer 3 · 2015-08-19T03:11:30.677

i Have Extjs Combo Like this :

{
xtype       :'combo',
emptyText   :'Pilih Client ...',
id          :'f_client',
store       : 'store_client',
displayField:'longname',
typeAhead   : true,
valueField  :'nickname',
width       : 350
}

and i try searching data a lowercase or A Uppercase is okay, so i think you must check again on your server side. cause some query like oracle is case sensitive.

column1 like '%a%'

and

`column1 like '%A%'`

is different.

score 3 · Answer 4 · answered Sep 04 '15 at 19:28

Ext.form.field.ComboBox has a property caseSensitive which is false by default. This means that the problem can be in your control, but only if this property is set to true. You can check in your console (or with the Sencha extension for Chrome) if this property is false.

Also check in your network tab of your console what is send to the server. If the combo sends uppercase, but the server returns lowercase, the problem is server side.

Combobox values are disappearing on typing

4 Answers4