Multiselect virtual setting combined with checkbox properties results in multiple selections

Progress® Kendo UI® for Angular Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

In Development

Last Updated: 04 Feb 2025 08:57 by ADMIN

Paul

Created on: 13 Mar 2024 08:08

Category: Kendo UI for Angular

Type: Bug Report

Multiselect virtual setting combined with checkbox properties results in multiple selections

When virtual is true for a multiselect and checkboxes are set to true, there is a bug which results in multiple items being selected.

To reproduce, one needs to scroll down a long list of items. The amount to scroll seems random but might have something to do with the itemHeight setting. When clicking directly inside the checkbox, two items are selected at once - the item selected, and one other seemingly random item. This does not happen if the click selection event happens inside the item, but not the checkbox.

I have reproduced this inside this code sandbox: https://codesandbox.io/p/sandbox/mystifying-shirley-2qxn32

4 comments

ADMIN

Zornitsa

Posted on: 04 Feb 2025 08:57

Hi Wei,

I am happy to inform you that a developer has been assigned to the associated GitHub issue and a fix for the MultiSelect bug in question is currently in development.

Regarding the temporary workaround for this unexpected behavior, you can use the following CSS declaration to avoid the issue until the fix becomes officially available:

.k-multiselect-popup {      
    .k-checkbox {
        pointer-events: none;
    }
}

Here is also a StackBlitz example with the above workaround applied:

https://stackblitz.com/edit/angular-biwbr7

I hope the provided information is helpful.

Regards,
Zornitsa
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Wei

Posted on: 28 Jan 2025 19:10

the bug has been opened for almost 2 years in github, still unplanned, what is the work around for this issue? we ran into the same issue. thanks

Wei

ADMIN

Zornitsa

Posted on: 19 Mar 2024 15:56

Hi Paul,

Thank you for reporting this unexpected behavior of the MultiSelect component and also for the workaround provided.

I would like to inform you that this issue is a known one and has already been logged in our public GitHub repository:

https://github.com/telerik/kendo-angular/issues/3977

Both the GitHub issue and this bug report will receive updates once a solution becomes available.

We apologize for any inconvenience this issue might cause.

Regards,
Zornitsa
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Paul

Posted on: 19 Mar 2024 15:21

Workaround implemented:

Add styling property to prevent pointer events on the checkbox, thereby preventing the click event from bubbling up through the DOM. Note: the checkbox is still selected because the click event is still captured on the parent element, but there's no occassion where more than one item is randomly selected.

.k-multiselect-popup {
.k-checkbox {
pointer-events: none;
}
}