The DropDownList's Keyboard Navigation Docs specify that the arrow keys move the highlight in the dropDownList, while Enter selects the highlighted item.
However, in reality, the arrow keys already select items. Via keyboard, it is not possible to select e.g. the third item in the list without selecting the first and the second item first (by pressing the down arrow).
E.g. the docs for Angular describe a different behavior.
When a filterable DropDownList uses a tooltip for each item, the DropDownList will close.
DropDownList Filter + Tooltip Issue | Kendo UI Dojo
Steps to reproduce are in the Dojo
The DropDownList should remain open with the tooltip.
Use a flag to handle when the DropDownList will close:
DropDownList/ToolTip - Prevent Closing | Kendo UI Dojo
With Kendo version 2025.2.520 the filterInput text has been set and the current value is 'Filter'. However, there is no built-in option in the API that provides the possibility to change the text. As the text is not part of the messages, it can not be localized in case another language is used.
Dojo - https://dojo.telerik.com/zidaocyO
Add the filter input text to the messages so localization and customizing the text are possible.
When the DropDownList is configured with autoWidth:true, each opening of the component increases the width of the popup with 1px
The width of the popup increases with each opening
The width should remain the same
The cascade event is triggered on initialization of the DropDownLists
The cascade event is triggered on initialization
The event should be triggered when the value of the "parent" DropDownList is changed.
Currently, the Virtualized DropDownList does not handle the autoWidth property, as describe in the offical client-side API documentation.
It would be beneficial if there is a way to circumvent around this limitation.
Binding an MVVM DropDownList to a property that is null results in an error on the console.
An error is thrown
No errors should be thrown
The dropDownList supports several keyboard shortcuts as documented in https://demos.telerik.com/kendo-ui/dropdownlist/keyboard-navigation. However, when e.g. a KeyDown event is triggered (and handled) by the widget, its propagation is not stopped. This behavior can be witnessed in this DOJO.
In our case, we e.g. use dropDownLists inside dialog windows that can be closed via ESC. When pressing ESC while a dropDownList is focused, this not only closes the dropDownList (as expected), but also closes the dialog.
The dropDownList should stop the propagation of events that it handled.
Bug report
`DropDownListSelectEvent.dataItem` is undefined when using keyboard to select the optionLabel, but is defined when using the mouse
Reproduction of the problem
Steps
Dojo: https://dojo.telerik.com/IvEXOvUH
Make a selection (e.g. "Apples").
Select the optionLabel item.
Expected
The value of DropDownListSelectEvent.dataItem is the same whether the selection is made via keyboard or mouse (assumedly).
The value of DropDownListSelectEvent.dataItem is clearly specified in the API docs when selecting the optionLabel.
Actual
The value of DropDownListSelectEvent.dataItem is "Select an option…" when selecting with the mouse.
The value of DropDownListSelectEvent.dataItem is undefined when selecting with the keyboard.
Environment
Kendo UI version: 2024.1.130
Browser: [all]
Hi Team,
I would like to request to add a class which associates with the Kendo DropDownList. This way, the developer could use CSS instead of jQuery to change the style of the specific popup.
Thank you!
The value of a disabled DropDownList is not announced in the below screen reader -> browser combinations:
NVDA with Chrome
JAWS with Chrome
The value is correctly announced by NVDA in Firefox.
After testing the scenario with the ComboBox, the value was correctly announced in all screen reader -> browser combinations.
The screen reader announces the disabled state of the DropDownList, but does not announce its value.
Note - the value of the regular select element below the DropDownList is announced.
The value of the disabled DropDownList should be announced in the above mentioned combinations.
When navigating between inputs and after using Shift+Tab for focusing on a previous input the DropdOwnList popup does not close on pressing 'Enter' key.
The popup does not close. If we directly focus the DropDownList and follow steps 6-8 the popup will close.
The DropDownList should close when pressing the 'Enter' key.
Describe the bug
While the loading icon is visible in the DropDownList when fetching data, the widget's height is changed.
To reproduce
You can compare the height of the two dropdownlists
Expected behavior
The height of the DropDownList shouldn't change when the loading icon is visible.
Affected browsers (please remove the unneeded items)
Hello,
Drop down widget is defaulted to first option even though ng-model is undefined, in case where we bind same value to k-data-value-field and k-data-text-field.
Please have a look on the below sample code where you can find issue. My expectation is drop down should not default when model value is not assigned.
Code:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/dropdownlist/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<input kendo-drop-down-list
k-data-text-field="'name'"
ng-model="data"
k-data-value-field="'name'"
k-data-source="productsDataSource"
style="width: 100%"></input>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
// $scope.data=0;
$scope.productsDataSource = new kendo.data.DataSource({
data: [{
'name':'Active','id':0
},{'name':'Cancel','id':1}]
}
);
});
</script>
</body>
</html>
Hi Team,
I'd like to request the functionality to add a Clear Button for the Kendo UI DropDownList similar to the ComboBox.
Thank you!
When the DropDownList is used as an editor in the Gantt, sometimes the DropDownList popup closes on double-click. The issue is observed when the trackpad's click is set to light and a double-click is performed.
Sometimes the DropDownList opens and closes.
Screencast
DropDownList should remain open
Even if no filtering is configured, when the delay option is different than 0 navigation between the items in the DropDownList does not work correctly.
The correct item is not always selected. In the demo, no delay is configured, but the default value is 500. The delay is supposed to affect the DropDownList only when filtering is enabled.
Note: Currently, when the filter option is configured, changing selection without opening the DropDownList is not possible.
https://dojo.telerik.com/@iankodj/AhUgaXuf
Set delay to 0 - Dojo
The selection of the items should be correctly changed when typing, even if a delay different than 0 is configured.
Also, it should be possible to change the selected item by typing in the keyboard even if the filter option is set and the DropDownList is closed.