telerik / kendo-angular

Issue tracker - Kendo UI for Angular
http://www.telerik.com/kendo-angular-ui/
Other
464 stars 213 forks source link

[ComboBox, DropDownList] Grouped data with virtual scrolling causes itemDisabled to work incorrectly #4270

Closed yanmariomenev closed 1 month ago

yanmariomenev commented 3 months ago

Describe the bug It seems that the component might have some indexing issues when trying to disable a specific item when the ComboBox is configured to work with virtual scrolling and grouped data. It seems that disabling items that aren't initially rendered will not receive the disabled state and also moving the scroll will start disabling other items that shouldn't be disabled. Screen recording of the interaction:

https://github.com/telerik/kendo-angular/assets/49076727/b4e3bdce-4a95-45ef-9ccc-21cb79622b2c

Grapes and mangoes should be disabled, but they are not and when scrolling it seems the items with 1 to 3 indexes receive the disabled state.

When disabling an item from the initially rendered list, the behavior is a bit better, but upon scrolling it sometimes enables the item or moves the disabled state to another item.

https://github.com/telerik/kendo-angular/assets/49076727/cac1f721-1c7b-45a1-b9f0-b7a160a10778

This issue appears to be primarily caused by this specific configuration and the grouping of the data. When the data isn't being grouped, then the items are disabled properly without any issues.

To Reproduce Open the following demo and follow the steps from both recordings: https://stackblitz.com/edit/angular-syifhy?file=src%2Fapp%2Fapp.component.ts First recording - open the list scroll down to render a new set of items and select 1 or more of them. Then slowly move the scrollbar to see the wrong placement of the disabled state. Second recording - select the 4th item scroll down a bit and then slowly start scrolling up to the item.

stnikolova commented 1 month ago

The fix is available in version 16.2.0.