Ext version tested:
  • Ext 5.1.0
Browser versions tested against:
  • Chrome
Description:
On comboboxes, having 'typeAhead:true' and 'autoSelect:true' produces some incorrect visual behaviour if the best match isn't at the top. TypeAhead highlights a different record further down the list, but the top record is the one that's actually selected if you move away. To the user leaving the combo seemingly should select the best match, but actually it selects the first record which is confusing.

Steps to reproduce the problem:
Created a fiddle here:

https://fiddle.sencha.com/#fiddle/itd

To see the problem:
  • In the combo type "al"
  • Alabama is highlighted
  • Tab away
  • The combo is populated with "GALWAY"
Initially I thought the problem was with the doAutoSelect and onTypeAhead methods clashing, but now I'm not too sure. However I've created an override to fix the behaviour to what was desired in our code, and included it below. Not sure its the best solution though as I'm relatively new to EXT, but it does seem to fix the problem.

Code:
onTypeAhead: function() {
    var me = this,
        displayField = me.displayField,
        record = me.store.findRecord(displayField, me.getRawValue()),
        boundList = me.getPicker(),
        newValue, len, selStart;

    if (record) {
        newValue = record.get(displayField);
        len = newValue.length;
        selStart = me.getRawValue().length;


        //Added this if block. Code taken from doAutoSelect
        if (me.autoSelect === true) {
            boundList.getNavigationModel().setPosition(record || 0);
        } else {
            boundList.highlightItem(boundList.getNode(record));
        }


        if (selStart !== 0 && selStart !== len) {
            me.setRawValue(newValue);
            me.selectText(selStart, newValue.length);
        }
    }
}