Bug report
Setting `autoWidth = true` breaks height in mobile adaptiveMode

Reproduction of the problem
https://dojo.telerik.com/wUbmMdkt

autoWidth: true"

autoWidth: false

Environment
Kendo UI version: [all]
Browser: [all ]

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.

Bug report

When the DropDownList is configured with autoWidth:true, each opening of the component increases the width of the popup with 1px

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/VzPJHcmm
2. Open the DropDownList multiple times

Current behavior

The width of the popup increases with each opening

Expected Behavior

The width should remain the same

Environment

• Kendo UI version: 2025.1.227
• Browser: [all]

Bug Report

The cascade event is triggered on initialization of the DropDownLists

Reproduction of the issue

1. Open this Dojo - https://dojo.telerik.com/nGNFvRwt
2. Open the browser console

Current behaviour

The cascade event is triggered on initialization

Expected behaviour

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.

Please add support for Prefix / Suffix Adornments for DropDownList

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!

Bug report

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.

Reproduction of the problem

1. Open this Dojo example in Chrome with JAWS/NVDA - https://runner.telerik.io/fullscreen/ERAxiqIy/3
2. Click the Enable checkbox
3. Select a value from the DropDownList
4. Click the Enable checkbox again.
5. Focus the Checkbox and press the down arrow key.

Current behavior

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.

Expected/desired behavior

The value of the disabled DropDownList should be announced in the above mentioned combinations.

Environment

• Kendo UI version: 2023.1.117
• Browser: [Chrome]

Bug report

Binding an MVVM DropDownList to a property that is null results in an error on the console.

Reproduction of the problem

1. Open this example - https://dojo.telerik.com/@martin.tabakov@progress.com/eNUMeLix

Current behavior

An error is thrown

Expected/desired behavior

No errors should be thrown

Environment

• Kendo UI version: 2023.1.117
• Browser: [all]

Bug report

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.

Reproduction of the problem

1. Open Dojo
2. Focus the text input
3. Press Tab to focus the DropDownList
4. Press shift-tab to focus the text input
5. Press again Tab to focus the DropDownList
6. Press Alt+down to expand the dropdown
7. Press the down arrow to select an option in the dropdown
8. Press Enter key

Current behavior

The popup does not close. If we directly focus the DropDownList and follow steps 6-8 the popup will close.

Expected/desired behavior

The DropDownList should close when pressing the 'Enter' key.

Environment

• Kendo UI version: 2022.3.1109
• Browser: [all]

Steps to reproduce:

1. Open the dojo using Google Chrome browser;

2. Open the first dropdown list;

3. Select any option from the list;

4. When the drop down closes, press Ctrl+V. The selected value changes for each time the keys combination is used.

 
Expected: CTRL+V combination does not trigger value selection.

Describe the bug
While the loading icon is visible in the DropDownList when fetching data, the widget's height is changed.

To reproduce

1. Open this Dojo example - https://dojo.telerik.com/AFuQItIv/4
2. Select an item in the first DropDownList

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.

• Kendo UI for jQuery

Affected browsers (please remove the unneeded items)

• All

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.

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!

Add a filterOptions option that will enable users to configure attributes, placeholder, etc for the search box of the DropDownList. 

I have upgraded a huge project we have, from Kendo UI 2017 to the latest version.
I managed to fix all the incompatibility issues that I had with the latest version and now it's ready to go live.

In the final regression tests our customer found a bug and now we are stack and cannot deploy the project.

Here is the problem:

In the DropdownList, if you type something and then press the clear button, the change event is firing two times. One with the value that you typed before and then one again with an empty value (the right one). The biggest problem is that there is no way to determine that the first event is coming from the clear button and not from the user, so I cannot find any workaround this.

I searched and I found that this started after this change.

You can check this dojo for a reproduction of the problem.
Steps:
Type "it" in the dropdownlist,
Wait for the items to popup
Don't select any item but press the clear button of the dropdownlist
You can see the attached image the wrong events.
If you select a version after 2019 R3, the change event is firing twice. If you select an older version the change event is not firing at all.

I can understand a change event with an empty value and I don't have any problem with that, but the first event is totally wrong.
Is there any quick solution to this so we can catch the deadline and deploy the new version of our project?

Thank you for your time,
John Dendrinos

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>

 

 

 

 

 

Add support for autoScroll to DropDownList options, such that the list scrolls when the mouse pointer reached the top of bottom of the container. Currently, autoScroll: true has no effect on that component. 

Mouse wheel scrolling of the options is not obvious to users, causing some to miss options that overflow the container.

I'm using your demo to reproduce the issue.  

When the user enters a value into the categories and tabs, the focus is not placed in the products field, instead it goes to the View Order button.  This makes using the cascade "feature" very difficult for users.  The focus should go products so they can further refine the search.  And then finally to orders.  But each time they tab they have to move the cursor back to the next field.

Also, since the product and order fields are disabled it prevents user from entering data (even if they know the correct value).  Is there a way to leave the cascade functionality whilst leaving the "child" fields enabled?  We were using it in a Region, Country, City filter, but because of these issues we have had to remove the cascade.

Expected behavior would be to leave all the fields enabled, if the user selects a category, then the subsequent fields (products and orders would be filtered to the selection) so that when the user starts typing in those the parent filter is added to their filter.

Whilst we are discussing filters, why if the filter is narrowed to a single item is it not automatically selected?  Currently the user has to filter, then select the item and then tab.  We have had numerous "bug" reports raised because the user didn't select before tabbing even though the item is the only one in the drop-down and appears to be selected.

Similarly the Mutliselect filter allows typing values, and even when the user selects the value in the dropdown and is added to the selected list, the typed text remains, making the mutliselect field value invalid on submission. 

Repro:

Open page: CascadeComboBox
Move focus to Categories combo (i used my mouse)
Type 'p' which opens the combo and shows 3 items starting with p
Select 'Products' using the down arrow (field now displays Products)
Click Tab
Focus moved to View Order button and NOT Products field.
Using the mouse to select a value works fine, but our users don't want to have to use the mouse as this slows down data entry.