[Solved] Tabbing into a RadComboBox and then pressing Down

[Kelly]

When I tab into a RadComboBox and then press the down arrow, it selects the first item - even though the first item is already selected!

This is a very serious usability issue because it is very different from a normal HTML dropdown list.  In a normal HTML dropdown list, if the first item is selected, then you tab into the dropdown field to focus it, then press down, it selects the second item.

So how can I work around this issue?  I need a blank item to be first in my dropdown list so that the user is required to make a selection. But when they tab into the field and press down - and the blank item is selected - that is very annoying.  Also, the required field validator says "Please select a status" even though they just did. That is also very annoying.

When the page loads I want the first item to be selected (the blank one).  When I tab into the field and press down I want the second item to be selected.

Here is my RadComboBox code.
                                            <telerik:RadComboBox ID="drdProdStatus" runat="server" Width="275px" DataTextField="Status"
                                                DataValueField="StatusID" Skin="Outlook" AllowCustomText="false" MarkFirstMatch="true" AppendDataBoundItems="true">
                                                <Items>
                                                    <telerik:RadComboBoxItem Value="" Text="" />
                                                </Items>
                                            </telerik:RadComboBox>


Setting AllowCustomText="true" is not an option.

[Rosi]

Hello Kelly,

When you tab into RadComboBox -the first item is selected, but it is not highlighted. It becomes highlighted when the dropdown is opened. This is the reason for the described behavior. My suggestion is to hook on the OnClientFocus event of RadComboBox and execute the following javascript in its event handler:

<script type="text/javascript">

function OnClientFocus(combo, e)
{
    var firstItem = combo.get_items().getItem(0);
    firstItem.highlight();
}
</script>

Hope this helps.

Regards,
Rosi
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center