Results 1 to 5 of 5

Thread: TypeAhead and AutoSelect clashing

    You found a bug! We've classified it as EXTJS-17202 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium User
    Join Date
    Feb 2015
    Posts
    2

    Default TypeAhead and AutoSelect clashing

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


  2. #2
    Sencha Premium User westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    1,035

    Default

    Nice one, certainly fixes our issue with it.
    Product Architect
    Altus Ltd.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

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

  4. #4
    Sencha User
    Join Date
    Oct 2015
    Posts
    4

    Default

    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

  5. #5
    Sencha User
    Join Date
    Jan 2016
    Location
    Brazil
    Posts
    142

    Default

    Issue still actual for Ext JS 7. I've just ported the fiddle to 7.0.0:
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •