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) {
2.
viewModel.dropdownlist.open();
3.
viewModel.dropdownlist.focus();
4.
});