How to distinguish sources of select event?

2 posts, 0 answers
  1. Terje
    Terje avatar
    3 posts
    Member since:
    Feb 2014

    Posted 19 Jun 2015 Link to this post

    I have a DropDownList which the user uses to select between different clients they are allowed to access. Switching clients can involve some disruption of the user experience (we're considering moving to a full page refresh), so I want to make sure that selection in the list only happens when the user has fairly positively confirmed a switch. Specifically I want to proceed to a change event in the cases where:

     1. The user clicks an item in the list.

    2. The user highlights an item in the list (for instance using the text search and/or keyboard navigation) and presses Enter.

    but I want to prevent a change event in the case where the DropDownList is unopened in focus and the user presses Up, Down, Home, or other keyboard navigators by themselves - these should only "move the highlight" and not confirm a change.

    I can't seem to find enough information in the select event to distinguish between these cases, so I can't use preventDefault() to control when a change happens. Am I missing some other avenue of approach here?


    My stopgap for the moment is to force the component to always open its popup list whenever it takes focus using jQuery: 

    1.$("#clients").closest("span.k-dropdown").focus(function (e) {
    3.        viewModel.dropdownlist.focus();
    4.    });
    and that seems to largely work because the popup doesn't cause change with every navigation, but it'd be nice to support the version without the popup too.

  2. Georgi Krustev
    Georgi Krustev avatar
    3725 posts

    Posted 23 Jun 2015 Link to this post

    Hello Terje,

    The DropDownList widget is designed to select an item and trigger change when popup is not opened (just like Html Select element). This behavior cannot be changed without modifying the code.

    If you would like to prevent the change event, then the only option is to open the popup element. Thus you can prevent the select event if needed. I am afraid that there is no other way to accomplish your business requirement.

    Best regards,
    Georgi Krustev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top