TypeAhead and AutoSelect clashing

[LastPrime]

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.

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

[westy]

Nice one, certainly fixes our issue with it.

[Gary Schlosberg]

Thanks for the report (and workaround)! I have opened a bug in our bug tracker.

[kdm1]

may be same issue
here
1 in example select Alaska
2 empty input by backspace & type 'al' - highlited Alabama
3 type 'Enter' - get Alaska in input field

4 select text in input & type 'al' - highlited Alabama
5 type 'Enter' - get Alaska in input field

in this case not apply arrow key (up|down) to dropdownlist

[fabricio.object]

Issue still actual for Ext JS 7. I've just ported the fiddle to 7.0.0: