Prevent deselect in popup when using keyboard navigation

4 posts, 0 answers
  1. Ron
    Ron avatar
    48 posts
    Member since:
    Oct 2010

    Posted 29 Sep Link to this post

    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?

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 03 Oct Link to this post

    Hello Ron,

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Ron
    Ron avatar
    48 posts
    Member since:
    Oct 2010

    Posted 03 Oct in reply to Georgi Krustev Link to this post

    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

  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 05 Oct Link to this post

    Hello 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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready