Moving through the dropdown with the arrow keys always starts on the first element

480

Carlos posted over 8 years ago

Hi,

I've noticed that if you have a dropdown with a pre-selected value, like this for example:

<ig:WebDropDown ID="ddl1"
 runat="server"
 DropDownContainerWidth="230px"
 DropDownContainerHeight="0" 
 Width="230" 
 DisplayMode="DropDown" 
 EnableRenderingAnchors="False"
 KeepFocusOnSelection="True"
 EnableAutoCompleteFirstMatch="True" 
 EnableDropDownAsChild="True"
 AutoSelectOnMatch="True" 
 EnableAutoFiltering="Client"
 EnableCustomValues="True"
 OnSelectionChanged="ddl1_SelectedIndexChanged">
 <AutoPostBackFlags SelectionChanged="On" ValueChanged="Off"></AutoPostBackFlags>
 <Items>
 <ig:DropDownItem Text="text1" Value="text1" />
 <ig:DropDownItem Text="text2" Value="text2" Selected="True"/>
 <ig:DropDownItem Text="text3" Value="text3"/>
 </Items>
 </ig:WebDropDown>

If you move through the items with the arrow keys you always start in the first element of the list no matter what is selected in the dropdown. For example, if the second value is selected and you press the down arrow key, I think it should move down to the third, but it goes to the first instead.

Is this the expected behaviour? Is there an easy way around it?

Parents

No Data

Reply

10685

Offline Ivaylo Ganchev posted over 8 years ago

Hello,
you are experiencing the default behavior. When using the keyboard to select the next item, the selection will always start from the first item in the available list of items. I will further investigate the possibilities to work around this and come back to you with more details.
Cancel
Reply

Cancel

Children

480

Carlos posted over 8 years ago in reply to Ivaylo Ganchev

Hi,

I have found a more or less decent implementation for it. Here's what I have so far.

function initializeWebDropDowns() {

if (e.keyCode === 38 || e.keyCode === 40) {
var instance = $IG.WebDropDown.find($(e.target).parents(".igdd_ClaymationControl")[0].id);
var currentItemIndex = instance.get_selectedItemIndex();
var numberOfItems = instance.get_items().getLength();
var newPosition;
if (e.keyCode === 38) {
newPosition = currentItemIndex === 0 ? 0 : currentItemIndex - 1;
instance.selectItemByIndex(newPosition, true, true);
return false;
}
if (e.keyCode === 40) {
newPosition = currentItemIndex === numberOfItems - 1 ? numberOfItems - 1 : currentItemIndex + 1;
instance.selectItemByIndex(newPosition, true, true);
return false;
}
}
return true;
});
}

However, this way the SelectionChanged and SelectionChanging events are not triggered anymore.

Is there a way to trigger them programatically after changing the selected item?

I also think you should review some of these "default behaviours". This is not really what most people would expect as default from a dropdown and it shouldn't be so tricky to achieve for us developers.
Cancel
Reply

Cancel