Unplanned
Last Updated: 19 Mar 2024 15:56 by ADMIN
Paul
Created on: 13 Mar 2024 08:08
Category: Kendo UI for Angular
Type: Bug Report
0
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

 

2 comments
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:

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;
    }
}