ComboBox Filtering Bug

  1. #1

    ComboBox Filtering Bug

    https://examples1.ext.net/Examples/F...oBox/Overview/
    Steps to reproduce (Editable with predefine value sample in link above)

    1) Click on the word Idaho (text in now highlighted)
    2) Type N (filtered dropdown appears)
    3) Press TAB to select the value Nebraska
    4) Press BACKSPACE TWICE (value is now cleared)
    5) Type C (filtering does not occur)
  2. #2
    Hi,

    Confirmed, thanks for the report. We will investigate a fix.

    I think a ComboBox on tab should select a value and lost its focus.

    So, I can suggest you the following solution - focusing a next field that you'd like to focus.

    Please see the AfterRender listener.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = 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" } 
            };
            
            this.Store1.DataBind();
            
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:ComboBox 
                ID="ComboBox1"
                runat="server"  
                Editable="true"
                DisplayField="state"
                ValueField="abbr"
                TypeAhead="true" 
                Mode="Local"
                ForceSelection="true"
                TriggerAction="All"
                EmptyText="Select a state..."
                SelectOnFocus="true">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="abbr" />
                                    <ext:RecordField Name="state" />
                                    <ext:RecordField Name="nick" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>            
                    </ext:Store>
                </Store>
                <SelectedItem Value="ID" />
                <Listeners>
                    <AfterRender 
                        Handler="this.keyNav.tab = this.keyNav.tab.createSequence(function () {
                                     TextField1.focus.defer(100, TextField1);
                                 });" />
                </Listeners>
            </ext:ComboBox>
            <ext:TextField ID="TextField1" runat="server" />
        </form>
    </body>
    </html>
  3. #3
    Hi Daniil,
    Thanks for looking into it. You are correct that it often makes sense to advance to the next field when pressing tab. But there are some scenarios where that is not applicable, such as when the combo is the only input control.
  4. #4
    Sure.

    What behavior would you like in a common case?
  5. #5
    Personaly? I would prefer if there would be a property on the combo for tab behavior.
    The issue with making it advance by default is that you can't opt out (without an override or something).

    So something like this:
    TabBehavior="Select"
    TabBehavior="SelectAndAdvance"
  6. #6
    Well, I'm not sure it would be so useful for most developers, because I've never faced with such request before and the problem is fairly not so easy to reproduce.

    You always can override Tab handling function
    combo.keyNav.tab
    function to get a behavior you wish.
    http://docs.sencha.com/ext-js/3-4/#!...roperty-keyNav

    As for me, on Tab a ComboBox should select an item and lost a focus. Then a browser should decide what to do with a focus - I mean a default browser Tab behavior.

    Though, I think, we can consider two options like FocusOnTab : "Lost" (default) and "Leave". But I'm still not sure it would be useful.

Similar Threads

  1. Replies: 3
    Last Post: Jan 07, 2013, 9:22 AM
  2. Replies: 1
    Last Post: Feb 15, 2011, 12:21 PM
  3. Need help in filtering
    By syed2uk in forum 1.x Help
    Replies: 1
    Last Post: Jan 12, 2010, 5:36 AM
  4. Replies: 1
    Last Post: May 18, 2009, 1:41 PM
  5. [Q] Filtering time of the day?
    By plykkegaard in forum 1.x Help
    Replies: 0
    Last Post: Apr 06, 2009, 7:52 AM

Posting Permissions