RadComboBox - Bound item automatically being selected when tabbing out of control

5 posts, 0 answers
  1. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 01 Aug 2011 Link to this post

    Hello,

    For all of our RadComboBox controls, the properties are set as in the sample below (via a server control that derives from RadComboBox), and EmptyMessage is set to 'Select...'.  I noticed that whenever an item was bound to the RadComboBox that started with S that item was automatically selected when tabbing through it on the UI.  We are using Q2-2011 DLLs.

    Here is a test page you can look at to recreate the problem.  There is nothing but a shell in the code behind file.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ComboBoxProblem.aspx.cs"
        Inherits="TestBed.ComboBoxProblem" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="rsmMain" runat="server">
            <Scripts>
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadScriptBlock ID="rsbMain" runat="server">
        </telerik:RadScriptBlock>
        <div>
            <telerik:RadComboBox ID="rcbTest" runat="server" AllowCustomText="false" ChangeTextOnKeyBoardNavigation="false"
                EnableTextSelection="true" MarkFirstMatch="true" EmptyMessage="Select..." CloseDropDownOnBlur="true"
                CollapseAnimation-Type="None" ExpandAnimation-Type="None" MaxHeight="200px">
                <Items>
                    <telerik:RadComboBoxItem Text="Apples" Value="1" />
                    <telerik:RadComboBoxItem Text="Oranges" Value="2" />
                    <telerik:RadComboBoxItem Text="Pears" Value="3" />
                    <telerik:RadComboBoxItem Text="Strawberries" Value="4" />
                    <telerik:RadComboBoxItem Text="Wild Cherries" Value="5" />
                </Items>
            </telerik:RadComboBox>
        </div>
        </form>
    </body>
    </html>

    I tracked this down to the highlightMatches() function when called from _onKeyDown. 

    The code basically does this:
     - Set Text value to  EmptyMessage  (Text = 'Select...')
     - Look for matches.  None found so
     - Set Text value to 'Select..', look for matches, none found...
     - Set Text value to 'Select.', look for matches, none found...
     - Set Text value to 'Select', look for matches, none found...
     - Set Text value to 'Selec', look for matches, none found...
     - Set Text value to 'Sele', look for matches, none found...
     - Set Text value to 'Sel', look for matches, none found...
     - Set Text value to 'Se', look for matches, none found...
     - Set Text value to 'S', look for matches, HEY!  I found a match, so highlight it!

    Here is your code for those functions:
    _onKeyDown: function (k) {
        var j = k.keyCode || k.which;
        if (j == a.Keys.Escape) {
            k.preventDefault();
        } if ($telerik.isIE && j != a.Keys.Down && j != a.Keys.Up) {
            this._updateFilterText = true;
        } if (!this._fireEvents || this._ajaxRequest) {
            return;
        } if ($telerik.isIE9 && (j == 8 || j == 127)) {
            this._compensateValuePropertyChangeEvent = true;
        } if (!k) {
            k = event;
        } this.raise_onClientKeyPressing(k);
        this._lastKeyCode = j;
        if (j == a.Keys.Escape && this.get_dropDownVisible()) {
            this._hideDropDown(k);
            return;
        } else {
            if (j === a.Keys.Enter) {
                if (this.get_dropDownVisible()) {
                    this._hideDropDown(k);
                } var g = this.findItemByText(this.get_text());
                if (this.get_allowCustomText() && !this.get_markFirstMatch() && !g) {
                    if (this.raise_selectedIndexChanging(null, k) == false) {
                        var f = this.get_selectedItem();
                        var m = this.get_highlightedItem();
                        if (f) {
                            f.set_selected(false);
                        } if (m) {
                            m.unHighlight();
                        } this.set_selectedItem(null);
                        this.set_selectedIndex(null);
                        this.set_highlightedItem(null);
                        this.raise_selectedIndexChanged(null, k);
                        var l = { Command: "Select", Index: -1 };
                        this.postback(l);
                    }
                } else {
                    this._performSelect(this.get_highlightedItem(), k);
                } if (this.get_markFirstMatch()) {
                    var h = this.get_text().length;
                    this.selectText(h, h);
                } k.returnValue = false;
                if (k.preventDefault) {
                    k.preventDefault();
                } return;
            } else {
                if (j === a.Keys.Down) {
                    k.returnValue = false;
                    if (k.altKey) {
                        this._toggleDropDown(k);
                        return;
                    } this.highlightNextItem(null);
                    if (k.preventDefault) {
                        k.preventDefault();
                    } return;
                } else {
                    if (j === a.Keys.Up) {
                        k.returnValue = false;
                        if (k.altKey) {
                            this._toggleDropDown(k);
                            return;
                        } this.highlightPreviousItem();
                        if (k.preventDefault) {
                            k.preventDefault();
                        } return;
                    } else {
                        if (j === a.Keys.Tab) {
                            if (this.get_dropDownVisible()) {
                                this._hideDropDown(k);
                            } this._raiseClientBlur(k);
                            this._selectItemOnBlur(k);  // This causes the last item of RadComboBoxOne to be selected when I click on RadComboBoxTwo
                            this._applyEmptyMessage();
                            this._focused = false;
                            return;
                        }
                    }
                }
            }
        } if (j == a.Keys.Left || j == a.Keys.Right) {
            return;
        } if (j >= a.Keys.Numpad0 && j <= a.Keys.Numpad9) {
            j -= (a.Keys.Numpad0 - a.Keys.Zero);
        } var d = String.fromCharCode(j);
        if (d && (!k.altKey) && !(this.get_enableLoadOnDemand() || !this.get_readOnly())) {
            this.highlightNextItem(d);
            return;
        }
    }
      
      
    function () { // This is highlightMatches() which is called from _selectItemOnBlur()
        if (!this.get_markFirstMatch()) {
            return;
        } var k = this.get_text();
        var f = this.getLastWord(k, this._getTrimStartingSpaces());
        if (this._getLastSeparator(k) == k.charAt(k.length - 1)) {
            return;
        } var d = this.findFirstMatch(f);
        if (this.get_highlightedItem()) {
            this.get_highlightedItem().unHighlight();
        } if (!d) {
            if (k && !this.get_allowCustomText() && !this.get_enableLoadOnDemand()) {
                var g = this._getLastSeparatorIndex(k);
                if (g < k.length - 1) {
                    var l = k.substring(0, k.length - 1);
                    if (l == "" && $telerik.isSafari) {
                        var h = this;
                        window.setTimeout(function () {
                            h.set_text(l);
                        }, 0);
                    } else {
                        this.set_text(l);
                        this.highlightMatches();
                    }
                }
            } return;
        }
        d.highlight();
        d.scrollOnTop();
        this.set_value(d.get_value());
        var m;
        var j;
        var g = this._getLastSeparatorIndex(k);
        var e = k.substring(0, g + 1) + d.get_text();
        if (k != e) {
            this.set_text(e);
            m = g + f.length + 1;
            j = e.length - m;
        } else {
            if (this._callbackText.length > 0) {
                m = g + this._callbackText.length + 1;
                j = k.length - m;
            }
        } if (m && j) {
            this.selectText(m, j);
        }
    }

    Has anyone else ran into this?  Any suggestions on how to fix this (other than to override Telerik's code, which could get ugly really fast)?  Is this expected behavior?

    Note: I have opened a support ticket (449526) for this problem and will update this post with any answer given me by Telerik.

    Thanks!
    Thad
  2. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 02 Aug 2011 Link to this post

    Two solutions have been found for this so far.
    My solution was to set Filter the filter property to anything other than None.  This caused the offending code to be skipped.

    Telerik's solution was to set AllowCustomText to true and subscribe to the following event.  They will be fixing this bug in a future release.
    <script type="text/javascript">
     
           function OnClientLoadHandler(sender) {
               sender.get_inputDomElement().readOnly = "readonly";
           }

    Either one is quite acceptable depending on what your business requirements are.

    Hope this helps someone!
    Thad

    Hmm, now how do I mark this thread as closed...
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rory
    Rory avatar
    159 posts
    Member since:
    Jul 2007

    Posted 18 Aug 2011 Link to this post

    you could add this to your ComboBox
    OnClientItemsRequesting="CheckSearchString"
    Then in the Script

    function CheckSearchString(sender, eventArgs) 
    {
             if (sender.get_text().length > 0 && sender.get_text() == "Select..."
             {
                  eventArgs.set_cancel(true);
             }
     }
  5. Dhara
    Dhara avatar
    1 posts
    Member since:
    Apr 2012

    Posted 17 Apr 2012 Link to this post

    none of the above solution work for IE 9
  6. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 20 Apr 2012 Link to this post

    Hi Dhara,

    It's rather strange that the suggested solutions are not working in IE9, could you clarify what is the exact version of the controls that you are using and also share your implementation so we could inspect it?

    Kind regards,
    Dimitar Terziev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017