When using keyboard navigation with the dropdownlist, combobox components, you cannot have no items selected in the popup. When you reach the start or end of the list, hitting the up/down arrow key wont deselect the item. In contrast to this behavior, the autocomplete popup doesn't behave the same way. When you reach the start or end of the list in that component, hitting the up/down arrow key will result in none of the items being selected. This is poor user experience in my opinion.
Imagine typing in the autocomplete input box and the popup shows only one result. By (accidently) hitting the up/down key, the item gets deselected and hitting the enter button after that will result in not having selecting an item from the list. Even more so, once you have closed the popup you cannot open the popup again with keyboard navigation. The popup will only get shown again when the text in the input box is changed. Again, this is poor user experience in my opinion.
Any suggestions?
3 Answers, 1 is accepted
The AutoComplete widget has a different purpose than the ComboBox/DropDownList, that is why it expose different keyboard navigation behavior.
The AutoComplete is more a suggestion box (just like the Google search bar). The widget shows suggestions in its popup and the user could loop through them without selecting anything (the items are just focused and not selected). That is why the user could reach the last one using DOWN arrow, un-focus it and focus the first one. This is the intended "loop" functionality.
The ComboBox/DropDownList, in contrast, directly select the next/prev item. They behave just like the native HTML Select element. Because the item is directly selected, we avoid looping the suggestion list, because this will result in unexpected selection. This could not happen in AutoComplete/MultiSelect because the user needs to hit ENTER explicitly.
The AutoComplete is designed to open its suggestion box only when there is initiated filter. It doesn't have toggle button by purpose. Again this is intended.
To sum up, the described AutoComplete behavior is intended and we cannot provide any workaround to change its implementation. If you would like more ComboBox/DropDownList components, then I would suggest you use them instead. For instance, you can hide the ComboBox toggle button, resulting in AutoComplete look and feel, but preserving the desired ComboBox behavior.
Regards,
Georgi Krustev
Telerik by Progress
Rank 1
Veteran
Hi Georgi,
Thank you for the response. If I were to user the ComboBox component instead of the AutoComplete component, could you demonstrate how to hide the toggle button properly? The API doesn't seem to support hiding the button if I'm not mistaken.
Regards,
Ron
Indeed, the ComboBox does not have a option to show/hide the toggle button. In order to achieve your goal you will need to hide the element manually using javascript:
http://dojo.telerik.com/ACEWE
Regards,
Georgi Krustev
Telerik by Progress