Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

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

4 Answers 146 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Thad
Top achievements
Rank 2
Thad asked on 01 Aug 2011, 08:00 PM
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

4 Answers, 1 is accepted

Sort by
0
Thad
Top achievements
Rank 2
answered on 02 Aug 2011, 12:57 PM
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...
0
Rory
Top achievements
Rank 1
answered on 19 Aug 2011, 02:03 AM
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);
         }
 }
0
Dhara
Top achievements
Rank 1
answered on 17 Apr 2012, 04:56 PM
none of the above solution work for IE 9
0
Dimitar Terziev
Telerik team
answered on 20 Apr 2012, 09:41 AM
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.
Tags
ComboBox
Asked by
Thad
Top achievements
Rank 2
Answers by
Thad
Top achievements
Rank 2
Rory
Top achievements
Rank 1
Dhara
Top achievements
Rank 1
Dimitar Terziev
Telerik team
Share this question
or