Bug report

When there are items selected in the MultiSelect and the close icon is clicked the popup is opened for a moment

Reproduction of the problem

1. Open the Demo - https://demos.telerik.com/kendo-ui/multiselect/index
2. Click the close icon in the first MultiSelect

Current behavior

The popup is opened for a moment

Expected/desired behavior

The popup should not get opened unexpectedly.

The issue is a regression introduced in 2022.1.412 version with the following commit - telerik/kendo@7953a90

Environment

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

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

Reproduction of the problem

Dojo example.

1. Type in "f" in the MultiSelect's input area. It is filtered and shows 2 items in the list.
2. Press "Ctrl + A" keys. The two items are selected.
3. Clear the text in the input. The list is populated with all items in the dataSource.
4. Press "Ctrl + A" keys again

Current behavior

All items are selected, but the first two ("Chai and Chang") are not highlighted as selected.

Expected/desired behavior

All items should be selected and highlighted as selected.

Environment

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

Hello ladies and gentlemen.

Readonly mode does not work correctly in Bootstrap 4 Theme.

If the MultiSelect is put into readonly mode programmatically and has a value and clearButton option is true - clear button is displayed and the value can be cleared.

https://dojo.telerik.com/UsiXAZuv

Best regards,
Eduard Töws

In Angular we want to lazy initiate the options of a multiselect. After angular loads the multiselect directive, the control does not react on changing the k-options variable. If I recall, it should be solved when the control supports the setOptions method, like Kendo UI Grid.

Hello dear support,

I ve a strange behavior that I may qualify as bug.

I ve tried to reproduce here https://dojo.telerik.com/osEPIvOG wit a result shown in this animated gif here attached (DPSN-13445).

Basically what's happening is that if your are selecting / clearing elements that looked to be in different pages (view), the dataItems() function does not return the correct value, but some previous item.

This "bug" is always reproducible;

Please let me know if there is a bad implementation (I m using here basic Telerik sample) or if there is a workaround, or if I can expect a fix;

By advance thx for your swift reply.

Bug report

MultiSelect doesn't focus the first suggested item of the popup

Reproduction of the problem

1. Open this Dojo
2. Make sure it has at least 2 values set on initialization
3. Write some text until the popup opens with some suggestions

Current behavior

The first suggestion of the popup is not focused as expected.

Expected/desired behavior

The first suggestion should be focused.

Environment

• Kendo UI version: 2020.3.1118 or later
• 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]

I'm submitting a...

• Bug report

Current behavior

When the MultiSelect is wrapped in a container with class .k-edit-field or .k-edit-buttons (e.g in a Grid popup editor) and the selected tags are hovered, their background-color becomes transparent.

The issue is partly related to #701.

Expected behavior

The MultiSelect tags should not have transparent background when hovered.

Minimal reproduction of the problem with instructions

The issue can be reproduced with the following Dojo example:

• Hover over one of the selected tags to see the background-color issue.

Environment

Product:

• Kendo Ui for jQuery

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

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

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]

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

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. 

Bug report

When an empty array is passed to the MultiSelect's value method inside the deselect event, the item that is deselected remains selected in the MultiSelect.

Reproduction of the problem

1. Open this Dojo and run it
2. Expand MultiSelect's popup list and click on "All" item.

Current behavior

The different MultiSelect items are deselected except for the "All" item.

*If the "if" statement is removed from the deselect event function in the Dojo, and only the 'e.sender.value([]);' is kept, the issue is reproducing no matter of the selected item in MultiSelect's popup.

Expected/desired behavior

Calling 'e.sender.value([]);' should remove all items selected in the MultiSelect.
Click on the "Clear values" button to see the expected behavior.

Environment

• Kendo UI version: 201x.r.ddd
• jQuery version: x.y
• Browser: [all]

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

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 ]