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
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
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.