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

Question

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' }
     ]
 }]

});```

Answer 1

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.

Answer 2

IDK why the first answer was chosen as the correct answer, I hope my answer below can enlarge your knowledge minimally. When your problem was:

"When we type anything in textfield it appends random characters and the search does not work as expected."

I wanna try to understand that statement like this:

"You want to try to search the item on your store or options by typing random character at any position of any matched item"

At this case, you must add these properties to your combobox to achieve the goal:

  anyMatch : true,   // this is the key
  caseSensitive : false,  //by default this has been set automatically
  minChars: 0,//by default this has been set automatically too
  forceSelection: false // set to false to allow free input to textfield with no matched result and set to true to force the user to choose one of the last matched result rather than giving the opportunity to input free text

Before we conclude that the problem is a bug or not, we need to do the whole researches to get the exact conclusion. Don't forget to learn more on https://docs.sencha.com/extjs/7.0.0/modern/Ext.field.ComboBox.html

Hope this help you.