[FIXED] [#911] [3.3] Issue with ComboBox SelectedItem

[vadym.f]

Hi,

I've noticed that SelectedItem behavior is rather inconsistent on the server. It behaves as expected if the previous text is removed using the Backspace key. However, when I highlight it and then start typing in on top of it, the text of SelectedItem evaluates to null in the code behind. Please refer to the test case below to reproduce.

<%@ Page Language="C#" %>

<script runat="server">
    public struct Company
    {
        public int CompanyID { get; set; }
        public string CompanyName { get; set; }
        public double Price { get; set; }
        public double Change { get; set; }
        public double PctChange { get; set; }
        public DateTime LastChange { get; set; }
    }

    private List<Company> TestData
    {
        get
        {
            var now = DateTime.Now;
            return new List<Company>
            {
                new Company { CompanyID = 1, CompanyName = "3m Co", Price = 71.72, Change = 0.02, PctChange = 0.03, LastChange = now },
                new Company { CompanyID = 2, CompanyName = "Alcoa Inc", Price = 29.01, Change = 0.42, PctChange = 1.47, LastChange = now },
                new Company { CompanyID = 3, CompanyName = "Altria Group Inc", Price = 83.81, Change = 0.28, PctChange = 0.34, LastChange = now },
                new Company { CompanyID = 4, CompanyName = "American Express Company", Price = 52.55, Change = 0.01, PctChange = 0.02, LastChange = now },
                new Company { CompanyID = 5, CompanyName = "American International Group, Inc.", Price = 64.13, Change = 0.31, PctChange = 0.49, LastChange = now },
                new Company { CompanyID = 6, CompanyName = "AT&T Inc.", Price = 31.61, Change = -0.48, PctChange = -1.54, LastChange = now },
                new Company { CompanyID = 7, CompanyName = "Boeing Co.", Price = 75.43, Change = 0.53, PctChange = 0.71, LastChange = now },
                new Company { CompanyID = 8, CompanyName = "Caterpillar Inc.", Price = 67.27, Change = 0.92, PctChange = 1.39, LastChange = now },
                new Company { CompanyID = 9, CompanyName = "Citigroup, Inc.", Price = 49.37, Change = 0.02, PctChange = 0.04, LastChange = now },
                new Company { CompanyID = 10, CompanyName = "E.I. du Pont de Nemours and Company", Price = 40.48, Change = 0.51, PctChange = 1.28, LastChange = now },
                new Company { CompanyID = 11, CompanyName = "Exxon Mobil Corp", Price = 68.1, Change = -0.43, PctChange = -0.64, LastChange = now },
                new Company { CompanyID = 12, CompanyName = "General Electric Company", Price = 34.14, Change = -0.08, PctChange = -0.23, LastChange = now },
                new Company { CompanyID = 13, CompanyName = "Government Motors Corporation", Price = 30.27, Change = 1.09, PctChange = 3.74, LastChange = now },
                new Company { CompanyID = 14, CompanyName = "Hewlett-Packard Co.", Price = 36.53, Change = -0.03, PctChange = -0.08, LastChange = now },
                new Company { CompanyID = 15, CompanyName = "Honeywell Intl Inc", Price = 38.77, Change = 0.05, PctChange = 0.13, LastChange = now },
                new Company { CompanyID = 16, CompanyName = "Intel Corporation", Price = 19.88, Change = 0.31, PctChange = 1.58, LastChange = now },
                new Company { CompanyID = 17, CompanyName = "International Business Machines", Price = 81.41, Change = 0.44, PctChange = 0.54, LastChange = now },
                new Company { CompanyID = 18, CompanyName = "Johnson & Johnson", Price = 64.72, Change = 0.06, PctChange = 0.09, LastChange = now },
                new Company { CompanyID = 19, CompanyName = "JP Morgan & Chase & Co", Price = 45.73, Change = 0.07, PctChange = 0.15, LastChange = now },
                new Company { CompanyID = 20, CompanyName = "McDonald\"s Corporation", Price = 36.76, Change = 0.86, PctChange = 2.40, LastChange = now },
                new Company { CompanyID = 21, CompanyName = "Merck & Co., Inc.", Price = 40.96, Change = 0.41, PctChange = 1.01, LastChange = now },
                new Company { CompanyID = 22, CompanyName = "Microsoft Corporation", Price = 25.84, Change = 0.14, PctChange = 0.54, LastChange = now },
                new Company { CompanyID = 23, CompanyName = "Pfizer Inc", Price = 27.96, Change = 0.4, PctChange = 1.45, LastChange = now },
                new Company { CompanyID = 24, CompanyName = "The Coca-Cola Company", Price = 45.07, Change = 0.26, PctChange = 0.58, LastChange = now },
                new Company { CompanyID = 25, CompanyName = "The Home Depot, Inc.", Price = 34.64, Change = 0.35, PctChange = 1.02, LastChange = now },
                new Company { CompanyID = 26, CompanyName = "The Procter & Gamble Company", Price = 61.91, Change = 0.01, PctChange = 0.02, LastChange = now },
                new Company { CompanyID = 27, CompanyName = "United Technologies Corporation", Price = 63.26, Change = 0.55, PctChange = 0.88, LastChange = now },
                new Company { CompanyID = 28, CompanyName = "Verizon Communications", Price = 35.57, Change = 0.39, PctChange = 1.11, LastChange = now },
                new Company { CompanyID = 29, CompanyName = "Wal-Mart Stores, Inc.", Price = 45.45, Change = 0.73, PctChange = 1.63, LastChange = now }
            };
        }
    }

    protected void Store1_ReadData(object sender, StoreReadDataEventArgs e)
    {
        var store = sender as Store;
        if (store == null) return;

        var filter = ComboBox1.SelectedItem.Text;
        var companies = TestData.OrderBy(r => r.CompanyName).ToList();
        if (!string.IsNullOrEmpty(filter) && filter != "*")
        {
            companies.RemoveAll(r => !r.CompanyName.ToLower().StartsWith(filter.ToLower()));
        }

        store.DataSource = companies;
        store.DataBind();
    }
</script>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>
    <style>
        .search-item {
            height: 24px;
            font: normal 10pt tahoma, arial, helvetica, sans-serif;
            padding: 3px 10px 3px 10px;
            border: 1px solid #fff;
            /*border-bottom: 1px solid #eeeeee;*/
            white-space: normal;
            color: #555;
        }

            .search-item h3 {
                margin-top: 1px;
                display: block;
                font: inherit;
                font-weight: normal;
                color: #222;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
                overflow: hidden !important;
            }
    </style>
    <script>
        var onSelect = function (combo, records, eOpts) {
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
            <Items>
                <ext:FormPanel
                    ID="FormPanel1"
                    runat="server">
                    <Items>
                        <ext:ComboBox runat="server" ID="ComboBox1" DisplayField="CompanyName" ValueField="CompanyID" TypeAhead="false" LoadingText="Searching..." HideTrigger="true"
                            ItemSelector="div.search-item" FieldLabel="Company" MinChars="1">
                            <Store>
                                <ext:Store runat="server" ID="Store1" AutoLoad="false" OnReadData="Store1_ReadData">
                                    <Proxy>
                                        <ext:PageProxy NoCache="true" />
                                    </Proxy>
                                    <Model>
                                        <ext:Model runat="server" IDProperty="CompanyID">
                                            <Fields>
                                                <ext:ModelField Name="CompanyID" />
                                                <ext:ModelField Name="CompanyName" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ListConfig runat="server">
                                <ItemTpl runat="server">
                                    <Html>
                                        <tpl for=".">
                                            <div class="search-item">
                                                <h3><span>{CompanyName}</span></h3>
                                            </div>
                                        </tpl>
                                    </Html>
                                </ItemTpl>
                            </ListConfig>
                            <Listeners>
                                <Select Fn="onSelect" />
                            </Listeners>
                        </ext:ComboBox>
                    </Items>
                </ext:FormPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

[Daniil]

Hi Vadym,

when I highlight it and then start typing in on top of it

It looks like that is not a condition of reproducing that. The issue doesn't appear always when I highlight the text and type on top of it. I was able to reproduce with backspace as well. And without backspace too.

I think I've found a consistent way to reproduce it.

1. Type "a"
2. Wait until the list is loaded and filtered.
3. Type "m" in addition to "a" (results in "am")

Yes, there is definitely an inconsistency. Created an Issue:
https://github.com/extnet/Ext.NET/issues/911

It might be not very straightforward to fix. Personally, I would even expect that a SelectedItem is null until there is no a real selected item in a ComboBox. I mean if you type in a ComboBox, it is "selecting" an item for me. But I see also a reason why typed text goes to SelectedItem.Text. I'll look what I can do to improve the situation.

Regarding your scenario, I would even recommend not to use SelectedItem.Text at all and switch to this.ComboBox1.RawText.

[vadym.f]

Thanks for the workaround, Daniil! It seems to be working and I can probably use it until the issue is resolved.

[Daniil]

The issue has been fixed in the SVN trunk revisions #6599 and #6600. It goes to the 3.3 release.