[FIXED] [#1683] Combobox search autocomplete when AnyMatch is enabled

I'm using Ext.Net v.4.8.1.

I want to select the auto completed text and not the selected list item.
How can I achieve that with the AnyMatch="true" functionality still enabled (showing all item that include said query) ?

To select the auto completed text or to sort only the searched list items so that auto completed item is first
would be a perfect solution.
I didn't find anything online specifically about this combination of attributes/actions.

Instructions to reproduce are inside html.

Thank you for your time!

Code:

---

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="comboboxSearchTest.aspx.cs" Inherits="WebApplication1.comboboxSearchTest" %>

<script runat="server">
    private object TestData
    {
        get
        {
            return new object[]
            {
                new object[] { "AL", "Alabama", "The Heart of Dixie" },
                new object[] { "AK", "Alaska", "The Land of the Midnight Sun" },
                new object[] { "AZ", "Arizona", "The Grand Canyon State" },
                new object[] { "AR", "Arkansas", "The Natural State" },
                new object[] { "CA", "California", "The Golden State" },
                new object[] { "CO", "Colorado", "The Mountain State" },
                new object[] { "CT", "Connecticut", "The Constitution State" },
                new object[] { "DE", "Delaware", "The First State" },
                new object[] { "DC", "District of Columbia", "The Nation's Capital" },
                new object[] { "FL", "Florida", "The Sunshine State" },
                new object[] { "GA", "Georgia", "The Peach State" },
                new object[] { "HI", "Hawaii", "The Aloha State" },
                new object[] { "ID", "Idaho", "Famous Potatoes" },
                new object[] { "IL", "Illinois", "The Prairie State" },
                new object[] { "IN", "Indiana", "The Hospitality State" },
                new object[] { "IA", "Iowa", "The Corn State" },
                new object[] { "KS", "Kansas", "The Sunflower State" },
                new object[] { "KY", "Kentucky", "The Bluegrass State" },
                new object[] { "LA", "Louisiana", "The Bayou State" },
                new object[] { "ME", "Maine", "The Pine Tree State" },
                new object[] { "MD", "Maryland", "Chesapeake State" },
                new object[] { "MA", "Massachusetts", "The Spirit of America" },
                new object[] { "MI", "Michigan", "Great Lakes State" },
                new object[] { "MN", "Minnesota", "North Star State" },
                new object[] { "MS", "Mississippi", "Magnolia State" },
                new object[] { "MO", "Missouri", "Show Me State" },
                new object[] { "MT", "Montana", "Big Sky Country" },
                new object[] { "NE", "Nebraska", "Beef State" },
                new object[] { "NV", "Nevada", "Silver State" },
                new object[] { "NH", "New Hampshire", "Granite State" },
                new object[] { "NJ", "New Jersey", "Garden State" },
                new object[] { "NM", "New Mexico", "Land of Enchantment" },
                new object[] { "NY", "New York", "Empire State" },
                new object[] { "NC", "North Carolina", "First in Freedom" },
                new object[] { "ND", "North Dakota", "Peace Garden State" },
                new object[] { "OH", "Ohio", "The Heart of it All" },
                new object[] { "OK", "Oklahoma", "Oklahoma is OK" },
                new object[] { "OR", "Oregon", "Pacific Wonderland" },
                new object[] { "PA", "Pennsylvania", "Keystone State" },
                new object[] { "RI", "Rhode Island", "Ocean State" },
                new object[] { "SC", "South Carolina", "Nothing Could be Finer" },
                new object[] { "SD", "South Dakota", "Great Faces, Great Places" },
                new object[] { "TN", "Tennessee", "Volunteer State" },
                new object[] { "TX", "Texas", "Lone Star State" },
                new object[] { "UT", "Utah", "Salt Lake State" },
                new object[] { "VT", "Vermont", "Green Mountain State" },
                new object[] { "VA", "Virginia", "Mother of States" },
                new object[] { "WA", "Washington", "Green Tree State" },
                new object[] { "WV", "West Virginia", "Mountain State" },
                new object[] { "WI", "Wisconsin", "America's Dairyland" },
                new object[] { "WY", "Wyoming", "Like No Place on Earth" }
            };
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Combo Boxes - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />

    <style>
        .example {
            width: 600px;
            border: 1px solid #CCC;
            padding: 0px 10px 10px 10px;
            margin: 0 0 10px;
        }

        #transformCombo label {
            display: block;
            margin: 1em 0 2px;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:ObjectHolder ID="DataHolder" runat="server" />

        <h1>Combo Boxes</h1>

        <div class="example">
            <p>INSTRUCTIONS TO REPRODUCE:</p><br>
            <p>1) Write 'mo' in field -> it autocompletes to 'Mother of States', but is selects 'The Mountain State' list item</p>
            <p>2) Press TAB button and it goes with the selected list item</p>
            <br>
            <p>Desired outcome is to select the autocompleted text and not the selected list item. </p>
            <p>How can I achieve that with the AnyMatch="true" functionality still enabled (showing all item that include said query) ? </p>
            <br>

            <ext:ComboBox
                runat="server"
                FieldLabel="Select a single state"
                DisplayField="slogan"
                Width="320"
                LabelWidth="130"
                ForceSelection="true"
                QueryMode="Local"
                TypeAhead="true"
                AnyMatch="true">
                <Store>
                    <ext:Store runat="server" Data="<%# TestData %>" AutoDataBind="true">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="abbr" />
                                    <ext:ModelField Name="name" />
                                    <ext:ModelField Name="slogan" />
                                </Fields>
                            </ext:Model>
                        </Model>

                        <Reader>
                            <ext:ArrayReader />
                        </Reader>
                    </ext:Store>
                </Store>
            </ext:ComboBox>
        </div>
    </form>
</body>
</html>

---

Hello Phoenix!

For what I read in your code, at a first glance, you are using ForceSelection="true". This is intended to force the selection of a given existing entry in the combo; so I believe that's just this hindering the possibility to fill with entered data (instead the highlighted autocomplete item).

I mean that you should not have ForceSelection set to true whenever you want a combo box to receive arbitrary, entered text values.

Have you tried setting it to false, and still don't get it the way you wanted it to behave?

I have tried ForceSelection="false" (or just removing ForceSelection - false is by default)
but the behavior remains the same with one exception: all entered text is accepted,
which is not suitable for the real web application.

Pressing "TAB" button still auto completes ComboBox value to the offered list item below,
and not to the autocompleted value in the field.

Hello again, @Phoenix!

It looks like this is an old bug, with solution, yet for some reason was not fixed in the Ext JS down to this point.

I could find this thread in Sencha forums reporting the bug -and- providing a workaround for the exact same issue, from 2015!

Good news is that it works not only for Ext.NET 4 but also for 5. We will log an issue to fix that on Ext.NET 5, but you can take advantage of the override anytime.

Here's the topic reporting the issue, also including a fix suggestion: TypeAhead and AutoSelect clashing

We have logged issue #1683 to track this defect, and we'll post an update here as soon as we get this fixed and ready to go next Ext.NET release.

Thanks for the report and nice test case!

Notice: the suggested fix in the sencha thread pointed is not endorsed by us, it is community contributed and we can offer no guarantee whether it will work, or whether it won't break anything else. You are welcome to try it and provide us feedback that will help us while applying a (most likely similar, if not exact same) fix to our code, but try at your own risk. I have personally tried the override as-is using your provided code sample and it looks alright.

Thank you, @fabricio.murta !

This workaround works perfectly!

This is how the override looks like:

Code:

---

Ext.form.field.ComboBox.override({
                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);
                        }
                    }
                }
            });

---

Hello @Phoenix!

Thanks for the feedback and for confirming the fix works for your needs. We'll look into having this make it to the next Ext.NET release!

Thanks again for your feedback, we have just merged this fix to Ext.NET as Sencha didn't seem to apply it to their Ext JS 7.1.0 recent release.

The fix should be included with Ext.NET 5.1.0 upcoming release.