This is a migrated thread and some comments may be shown as answers.

How to distinguish sources of select event?

1 Answer 37 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Terje
Top achievements
Rank 1
Terje asked on 19 Jun 2015, 02:24 PM

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.    });
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.

1 Answer, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 23 Jun 2015, 09:03 AM
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
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
DropDownList
Asked by
Terje
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Share this question
or