Search code examples
searchcomboboxx-editableextjs7

searching a word does not work in combobox in ext 7 version

i have a combobox in EXT version 7 code. I have the editable config as true. My code is as below. This code is similar to what is present in the sencha docs. I have just changed the editable config to true . When we type anything in textfield it appends random characters and the search does not work as expected. Is it a bug with Ext 7? I am not able to figure out. Is someone else also facing something similar?

Ext.create({
 fullscreen: true,
 xtype: 'container',
 padding: 50,
 layout: 'vbox',
 items: [{
     xtype: 'combobox',
     label: 'Choose State',
     queryMode: 'local',
     displayField: 'name',
     valueField: 'abbr',

     // For the dropdown list
     itemTpl: '<span role="option" class="x-boundlist-item">{abbr} - {name}</span>',

     // For the content of the text field
     displayTpl: '{abbr} - {name}',

     editable: true,

     store: [
         { abbr: 'AL', name: 'Alabama' },
         { abbr: 'AK', name: 'Alaska' },
         { abbr: 'AZ', name: 'Arizona' }
     ]
 }]

});```

Solution

  • I have the same problem with the combobox component in the modern toolkit. I tried the same setup in the Ext JS Version 6.5 and the same error occured.

    The only workaround I found for now was to not use the displayTpl config. Then it worked as intended.

    EDIT:

    I debugged a little bit into the ext-modern-all and found a solution. If you want to be able to edit the input field as well as to use the displayTpl you have to set forceSelection: true. Otherwise it will treat your entry as new record and this bug will occur. (https://docs.sencha.com/extjs/7.0.0/modern/Ext.field.ComboBox.html)

    I hope this helps.