After updating the version of Kendo we are using to 2022.1.412 we noticed a weird behavior in the DropDownLists. Clicking the drop down arrow once opens the list, then clicking the arrow again closes and re-opens the list instead of just closing it. Note that this does not happen while clicking on any other part of the drop down to close it, selecting an item from the drop down, or clicking outside the drop down list. It only happens while clicking on the arrow button.

Behavior can be seen in the demos on these pages:

https://demos.telerik.com/kendo-ui/dropdownlist/template

https://demos.telerik.com/kendo-ui/dropdownlist/grouping

https://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist

However the behavior does not appear on these pages:

https://demos.telerik.com/kendo-ui/dropdownlist/virtualization

https://demos.telerik.com/kendo-ui/dropdownlist/serverfiltering

 

Steps to Reproduce:

• Click the drop down arrow to open the drop down list
• Click on the arrow again and observe the list close and re-open (Note it sometimes doesn't happen right away but takes a few tries)

In our application, we have the requirement to display the DropDownList's filter textBox only if there are more than a specific number of items in the DropDownList. Therefore, we count the items everytime they change (i.e. an item is added/removed or perhaps all items are replaced) and then update the DropDownList's filter setting accordingly via setOptions().

Additionally, we use the dataBound() event for internal UI tweaks and therefore access the e.sender object.

This DOJO demonstrates that e.sender has a different structure before and after setOptions() is called. For instance, the list property does no longer exist. Check the console output, the event object is logged every time dataBound() is called.

Interestingly, this only happens when passing a complete (but updated) object to setOptions() and not when passing only a partial options object. Still, re-setting options to the same value as before should not interfere with any event args.

TL;DR: The DropDownList widget cannot be closed by clicking the arrow-icon.

The long story:

After the DropDownList has been opened once, it closes and reopens every time the user clicks the arrow-icon. Closing the DropDownList still works when clicking anywhere on the dropDown except the arrow-icon (or rather the button around it) or anywhere else but the dropDown. This DOJO demonstrates the problem. Animations have been disabled to allow easier reproduction (with animations on, the problem appears only occasionally, probably because of timing issues).

If you look closely, you will notice that the dropDown closes when the mouse button is pressed and reopens when the mouse button is released (this is when the click event is fired). Therefore, the problem can be (temporarily) mitigated by suppressing the mousedown event on the dropDown's wrapper element.

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

As my grid edit forms have expanded past the default popup, I have been using editable template. These are bound with MVVM and work well. But not all options work via MVVM like the cascade options below. I would like to use the cascade options in this scenario. It would be great to have all configuration options available via MVVM.

            <select id="ParentID" name="ParentID"
                    style="width: 100%"
                    data-role="dropdownlist"
                    data-text-field="Name"
                    data-value-field="ID"
                    data-cascade-from="ImprovementTargetID"
                    data-cascade-from-field="ImprovementTargetID"
                    data-cascade-from-parent-field="ID"
                    data-source="PEDropDownDataSource"
                    data-option-label="Pick PE..."
                    data-value-primitive="true"
                    data-bind="value:ParentID">
            </select>

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!

Bug report

The height of the DropDownList popup is incorrect when using LESS themes.

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/@martin.tabakov@progress.com/oMohisUF/2
2. Open the DropDownList

Current behavior

The popup height is incorrect.

Expected/desired behavior

The popup height should be big enough to fit the list.

Environment

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

Bug report

When filtering is performed in the parent widget and an item is selected, duplicate read request are sent to the remote end point for the child widget data.

Reproduction of the problem

1. Open the Dojo
2. In the parent DropDownList search "be" and select "Beverages"

Current behavior

Two requests are sent to the 'Products' DropDownList read end point.

Expected/desired behavior

There should be a single request for reading the widget`s data.

The issue is a regression since 2019 R3 SP1 (2019.3.1023)

Environment

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

The Kendo UI DropDownList allows the user to entera filter which is applied on the available items (documented here: https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/configuration/filter). As soon as a filter term entered by the user is applied to the dataSource, the selected item is no longer marked. Usually, the .k-state-selected CSS class is set on the corresponding DOM element.

This behavior can also be reproduced in the official Kendo UI Dojo about filtering: https://dojo.telerik.com/eVuSopuj

A kendoDropDownList places an arrow to the right of the <select/> element, indicating it's a dropdown (.k-i-arrow-s). It would be cool if kendoMultISelect did the same thing. 
Clicking the <select/> element or the arrow should also toggle the visibility on the list items.

See http://stackoverflow.com/questions/31825788/kendo-multiselect-to-have-arrow-icon-and-behavior-to-close-on-click .

https://dojo.telerik.com/iliKAqUr

1. select "Oranges" from the dropdown
2. press "Change value to 'Bananas'" button
3. press "Sort" button
4. select "Oranges" from the dropdown

Expected: should see two events for "Changed to Oranges" but only see one
Actual: status only shows one value change event from the first selection of "Oranges"

It seems this issue was introduced with the fix for https://github.com/telerik/kendo-ui-core/issues/4496

The introduction of _oldText in the _change method of kendo.list.js has introduced a flaw in the value change detection for DropDownList

The above dojo presents a way to short-circuit the issue since it is not easy to show the _oldText issue since the index check works as a fallback.

In Combox, DropDownList, Multiselect widgets, when grouping, the first item is incorrectly rendered (inconsistently with the others).

This can be observed as of today on:

1. https://demos.telerik.com/kendo-ui/combobox/grouping
2. https://demos.telerik.com/kendo-ui/dropdownlist/grouping
3. https://demos.telerik.com/kendo-ui/multiselect/grouping

Additionaly, when groupTemplate is defined, it's ignored for the first item: https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/configuration/grouptemplate

Check out this idea. It may help solve this issue and help with UI presentation.
http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/3767009-treeview-in-combobox

Admin edit: A Knowledge Base article that shows how you can achieve this: https://docs.telerik.com/kendo-ui/knowledge-base/disable-multiselect-items

Bug report

Reproduction of the problem

Dojo example

1. Inspect the value in the pre tag above the DropDownList and the selected value in the DropDownList.

Current behavior

The model has the extra spaces trimmed and there is a single space between the words:

<pre class="ng-binding">Magazzini Alimentari Riuniti</pre>

In the DropDownList the value properly contains 2 spaces between the words.

Expected/desired behavior

In the data the selected item has 2 spaces between the words: Magazzini Alimentari Riuniti
The model value should be identical to the data and the extra spaces should not be trimmed.

Environment

• Kendo UI version: 2020.2.617
• jQuery version: x.y
• Browser: [all]

When there is no filter enabled in the DropDownList it is possible to select an item just by typing, without opening the DropDownList popup.

https://dojo.telerik.com/ELEfIZIx

It would be useful if such an option is available when the filter of the widget is configured. 

Bug report

The change event is being triggered when having an initially selected item in the DropDownList and then open the DropDownList and click on the default selected item. This bug is represented only in MVVM.

Reproduction of the problem

1. Open this Dojo and run it. The three cascading DropDownLists will have default selected items
2. Click on the first DropDownList and select the already selected "Confections" option
3. The other two DropDownLists will be reset because of the change event thrown in the first DropDownList

Current behavior

The change event of a DropDownList with initial data selected is being triggered when clicking on the already selected value.

Expected/desired behavior

Selecting the already selected item of a DropDownList shouldn't trigger its change event because there is no actual change in the component's value. Please check this Dojo for the expected behavior.

Environment

• Kendo UI version: 2019.2.619
• jQuery version: x.y
• Browser: [all]

In the DropDownList and ComboBox, virtualization only works when the popup is open. In both widgets, item navigation is functional by pressing down to select the next item in the list without opening the popup. However, when the end of the first page of results is reached, the selection goes back to the top of the first page of results instead of loading the second page via virtualization. This misleads the user in that it only presents a portion of the options available. This is also an issue for disabled users and accessibility.

https://demos.telerik.com/kendo-ui/dropdownlist/virtualization

https://demos.telerik.com/kendo-ui/combobox/virtualization

In both examples, holding down without opening the popup will never load more results.

We have had this issue in the past but it is a bigger issue now that we are focusing more on accessibility since users rely more heavily on keyboard navigation.

the multiselect control should have the possibility to define elements as not editable (readonly) so that those elements can not be removed while other elements can be removed or new elements can be added.

When the user enters a filter, the list is filtered. But if the user deletes the filter by clicking on the X in the filter box, the list remains filtered. It does not revert to the full, unfiltered list. 

To get back to the full list, the user must delete the filter by backspacing or pressing the delete key on the keyboard.

This behavior is confusing some users, who have used the mouse to delete the filter in IE11.  There's no longer a filter string there, but the list is still filtered.

Can  the dropdownlist listen for the click that clears the filter string from the textbox?

Populate selected items when using browser back buttons for both Html and MVC Wrapper versions