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

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?

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.

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.

Hello,

n order to visually see the change when you select an item and the corresponding css be applied to this item, instead of just internally marking it as selected, you could achieve this using the select() method on the desired item. Please notice, currently it is best to use the items index to manipulate them so you could consider using something like the approach described in the following threads.

 

http://es.infragistics.com/community/forums/t/51039.aspx
http://es.infragistics.com/community/forums/t/30177.aspx