Bug report

When a new item is added and the dataSource's sync method is called, the requestEnd event handler data (arg.type) returns the type of request as "read", instead of "create".
As a result the Add new item demo, does not work as expected, because it has a check for the type of the request in the requestEnd handler, and expects the request to be "create". Since the request type comes out as "read" the logic for selecting the newly added item is not executed.

In previous versions the request has been correctly identified as "create". The issue is exhibited only in the MultiSelect. The ComboBox and the DropDownList return the request as "create".

This behavior has been introduced in R3 2017. Reproducible in Chrome, Firefox and Chromium Edge. Not reproducible in IE11 and Spartan Edge.

As a workaround the addNew function can be modified as shown below:

function addNew(widgetId, value) {
    var widget = $("#" + widgetId).getKendoMultiSelect();
    var dataSource = widget.dataSource;

    if (confirm("Are you sure?")) {
        dataSource.add({
            ProductID: 0,
            ProductName: value
        });
      
        dataSource.one("sync", function() {
          var index = dataSource.view().length - 1;
          var newValue = dataSource.at(index).ProductID;
          
          widget.value(widget.value().concat([newValue]));
        });

        dataSource.sync();
    }
}

Reproduction of the problem

Dojo example.

1. Open the browser's console.
2. Focus the input and type in some random text.
3. Click the button in the popup to add a new item.
4. The type of the request returned by the requestEnd event data is logged in the console.

Current behavior

The event data returns "read" as the type of the request.

Expected/desired behavior

The event data returns "create" as the type of the request.

Environment

• Kendo UI version: 2020.1.114
• jQuery version: x.y
• Browser: [Chrome XX | Firefox XX | Chromium Edge ]

Bug report

In IE 11, MultiSelect with autoClose:false does not prevent the popup from closing. The widget has to be placed at the bottom of the page, so that there is no space for the popup to open below the input field.

Reproduction of the problem

1. Open this Dojo example.
2. Scroll to the bottom of the page.
3. Start selecting items until the tags do not fit the input field.
4. When the input's height expands, the popup closes.

Current behavior

The popup closes when the height of the input field expands to fit tags on a new line.

Expected/desired behavior

The popup should remain open.

Environment

• Kendo UI version: 2020.1.219
• Browser: [Internet Explorer 11]

Bug report

MultiSelect with virtualization scrolls automatically to the first item in the dropdown after selecting items.

Note: the issue is reproduced inconsistently.

Reproduction of the problem

1. Open the Dojo example - https://dojo.telerik.com/oSuTUhiQ/4.
2. Scroll to e.g item 10296.
3. Start selecting all the items down.

Current behavior

At some point, the component will scroll to the top of the dropdown.

Expected/desired behavior

The component should not scroll to the top, the focus should stay on the currently selected item.

Environment

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

Bug report

MultiSelect with virtualization and tagMode: single deselects items when too many items are selected.

Reproduction of the problem

1. Download and unzip the attached project.
2. Run the project.
3. Start selecting items from the first item on.

For convenience, attached is a small video demonstrating the behavior.

Note: So far I was unable to reproduce the issue in a Dojo example when trying to replicate the configuration from the project.

Current behavior

At some point, the dropdown popup will scroll up, and some items that have been selected, will be deselected. Also, the single tag for the selected items will disappear.

Expected/desired behavior

The component should not be deselecting items, should not scroll up and the tag should not disappear.

Attachments:
Project - MultiSelectIssue.zip
Video - Kendosln_Issue.zip

Environment

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

Hi,

I am running in ti issue where extended MultiSelect selects primitive values after 1st value has been selected. See image blow and attached sample to recreate issue. Please also provide feedback regarding a way to mitigate this bug. 

LS,

When the option highlightFirst is set to false and the autoBind is set to false, the first item is always highlighted.

Steps to reproduce:

Edit this example: https://demos.telerik.com/kendo-ui/multiselect/index

Add the parameters:

              highlightFirst: false,
              autoBind: false,

Click on the multiselect, the multiselect will open, but the first item is highlighted. Expected behaviour: first item not highlighted.

Change the autoBind to true or undefined, the first item isn't highlighted.

The problem with the first item highlighted is that this option will be selected when the user hits enter.

Is there any work around for this issue?

Thanks in advance.

Maritn Quaak

Bug report

The MultiSelect is flickering several times when filtering and then selecting an item in Desktop mode on Safari.

Reproduction of the problem

1. Open the Virtualization demo in desktop mode in Safari on a touch device.
2. Filter the MultiSelect and select an item from the bottom of the filtered list.

Current behavior

The selected item flickers several times. (the selected item disappears and re-appears several times)

Expected/desired behavior

The selected item should not be flickering.

Environment

• Kendo UI version: 2020.3.1118
• Browser: [iOS Safari ]

Bug report

In the MultiSelect widget preventing the default of the filtering event while minLength is set to more than 1 causes the value method to not be able to properly get and set values of the selected dataItems.

Reproduction of the problem

1. Open this Dojo
2. Type Cha and select an item
3. Click the Clear Value button

Current behavior

The Clear Value button is able to clear the selected values but is not updating to visualize the change in the Widget

Expected/desired behavior

The button Clear Value is expected to clear the selected values and visualize the change

Environment

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

Bug report

Reproduction of the problem

Dojo example.

1. Focus the MultiSelect and type in "c". The data is filtered and "Canada" is displayed in the list.
2. Select "Canada".
3. Click in the MultiSelect's input area.

Current behavior

The filter is cleared and all the items in the dataSource are listed, even though "c" remains in the input area.
If step 2 is omitted, the filter is not cleared.

Expected/desired behavior

The filter should not be cleared. After step 3 the MultiSelect should still show only "Canada" in the list of items.

Environment

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

The multiSelect supports several keyboard shortcuts as documented in https://demos.telerik.com/kendo-ui/multiselect/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 multiSelects inside dialog windows that can be closed via ESC. When pressing ESC while a multiSelect is focused and open, this not only closes the multiSelect (as expected), but also closes the dialog.

The multiSelect should stop the propagation of events that it handled.

Hi Kendo Team,

After updating to version 2022.1.301 we noticed that the multiselect fields would look broken in some situations.

If the text of a selected item is longer than the line, the text of the new 'chip' will break into a new line.
The chip itself though keeps its fixed height of 24px resulting in an unreadable entry. (see attached image).
This only seems to be an issue in less themes.

We managed to reproduce this behavior in a dojo: https://dojo.telerik.com/ERaQegEc

You can see that in the second field we managed to fix this by modifying the styles of k-chip:

.k-chip {
    line-height: 17px;
    min-height: 24px;
    height: auto;
}

Thanks,

Markus

Bug report

When MultiSelect is used inside Grid columns filter, it is closing immediately after clicked in the MultiSelect filter input.

Reproduction of the problem

1. Open the Knowledge Base article - https://docs.telerik.com/kendo-ui/knowledge-base/multiselect-used-for-column-filtering
2. Click on the 'Name' column filter icon to open the filter popup.
3. Click in the MultiSelect input filter.

Current behavior

The filter popup is closing first time when clicked. Next time when the filter popup is opened it is not rendered properly.

Expected/desired behavior

The filter popup should not be closed when clicking in the Multiselect filter input. The MultiSelect list items should be rendered below the filter input.

The issue is a regression introduced in 2022.1.301 with the following commit telerik/kendo@bb73744

Environment

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

The documentation for the Kendo UI MultiSelect widget states that the user can highlight the next/previous item using RIGHT/LEFT when the selection popup is closed. This works as expected. However, if the user then presses TAB and moves the focus somewhere else, the item remains highlighted.

Since the highlight only indicates that certain actions can be executed on the item, it should be removed in such a case as the actions are no longer executable. This can easily be reproduced with the keyboard navigation sample:

• Select a few items
• press LEFT
• press TAB

Bug report

In MultiSelect when the value is set initially and the mapValueTo option is set to 'dataItem', if the user first open and close the popup, the last item can not be removed and an error 'c.select(...).done is not a function' is thrown.

Reproduction of the problem

1. Open the Dojo example. - https://dojo.telerik.com/@NeliKondova/UCesAQen
2. Open the popup and scroll to the "Hungry Owl All-Night Grocers" item
3. Close the popup
4. Try to remove the "Hungry Owl All-Night Grocers" from the input

As the Dojo above does not use a remote valueMapper below is a sample project where a remote valueMapper method is implemented
WebApplication3.zip

Current behavior

The last item can not be removed and an error 'c.select(...).done is not a function' is thrown in the browser`s console.
The other items except the last one can be removed as expected. Also, all items can be removed initially in case the popup has not been opened and scrolled to the last item from the value.

Expected/desired behavior

It should be possible to remove all items displayed in the MultiSelect input, even in a scenario where the popup has been opened and closed.

Environment

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

Bug report

An error occurs when filtering the MultiSelect with grouping enabled.

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/IJErEZiD
2. Open the MultiSelect and scroll down a bit.
3. Type "w" so that the No Data Template would appear.

Current behavior

An error occurs on the browser console.

Expected/desired behavior

No errors should occur when filtering the component.

Environment

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

Bug report

When the value of the widget is set in the dataBound event handler the filtering events is fired and e.filter is undefined

Reproduction of the problem

1. Open the Dojo
2. Open the browser console and type something in the MultiSelect to filter the data.

Current behavior

The filtering event is fired a second time and the second time the e.filter is undefined.

Expected/desired behavior

Double-checlk if the filtering event should be fired a second time.
The e.filter and e.sender.dataSource.filter().filters[0] should return the same value.

Environment

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

Bug report

If the MultiSelect open event is prevented, the animation container has display:block style, blocking inputs beneath the MultiSelect

Reproduction of the problem

1. Open this example - https://dojo.telerik.com/EqOSOReM/38
2. Type something in the MultiSelect and blur, without selecting an item.
3. Focus the MultiSelect again
4. Try to focus the input beneath

Regression introduced with 2022.2.621

Workaround: manually hide the animation container - https://dojo.telerik.com/EqOSOReM/38

Current behavior

The k-animation-container has display:block style, preventing the input beneath it from being focused

Expected/desired behavior

The k-animation-container should have display:none style.

Environment

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

Bug report

Setting the delay option of the MultiSelect doesn't have an effect.

Regression introduced with 2024.1.130

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/oyaHULOv/4
2. Type some text to filter the data

Current behavior

The 1 second delay is not respected and the data is filtered instantly

Expected/desired behavior

There should be 1 second delay before the data is filtered

Environment

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