CODEWITHSUNDEEP
javascriptextjscomboboxextjs5
Awesome
Awesome

Reputation: 6639

Combobox values are disappearing on typing

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 ?

Upvotes: 12

Views: 2018

Answers (4)

JChap
JChap

Reputation: 1441

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

Upvotes: 4

Jonathan cartwright
Jonathan cartwright

Reputation: 142

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

Upvotes: 4

Tarabass
Tarabass

Reputation: 3150

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.

Upvotes: 3

Rifai
Rifai

Reputation: 194

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.

Upvotes: 3

Related Questions