search

telerik / kendo-angular

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

[Grid] Focus jumps when virtual scrolling is enabled #3867

Open stnikolova opened 1 year ago

stnikolova commented 1 year ago

Describe the bug

Case 1

When navigable=true and virtual scrolling is enabled, the focused cell jumps to a different cell (visible) while scrolling.

To Reproduce Steps to reproduce the behavior:

  1. Find the first example in this documentation article
  2. Select a cell from the 10th row
  3. Start scrolling the Grid

Expected behavior TBD

Screenshots

https://user-images.githubusercontent.com/18744873/205694270-def8ab88-973e-4ccc-aa14-f39d3b571474.mov

Browser All

Case 2

When scrolling down to the bottom and clicking on a cell in the last row (10000th), it marks the cell three rows above as the active cell. The same happens with the arrow down key, when arriving at the last row, it suddenly jumps three to three cells above. When holding the arrow down key down it is looping through the three cells above the last row, but it will never go to the last row.

Note: When horizontal scrolling becomes active it is working correctly again.

Screenshots

https://user-images.githubusercontent.com/18744873/205980350-b921fe25-6056-467e-a56e-436d2cef41e5.mp4

Browser Chrome: 108.0.5359.99 Edge: 108.0.1462.46 (Officiële build) (64-bits) Firefox: 107.0.1 (64-bits) >> In case of that “Virtualization with virtual data” I only see the same problem when the browser width is wider then approximately 3063px. OS Windows Screen resolution 4k (3840x2160), scale: 150% Zooming No zooming applied.

Additional context Ticket ref 1589451

The described issue in Case 2 is caused by the change in resolution and the scale. Refer to the resetNavigationViewport method => specifically investigate the lastItemIndex and lastItemOverflows variables.

georgi-sla commented 1 month ago

Similar behavior could be observed in cases where the virtual scrolling is enabled and a footer is rendered in one of the Grid columns. When the user scrolls down the Grid and clicks on the footer cell, the focus is shifted to one of the records on the first page of the Grid (usually the penultimate or the second to last):

https://github.com/telerik/kendo-angular/assets/108671673/54f40713-47f2-43d2-8e89-229597a03774

Please check out the following StackBlitz demo for further reference of this behavior: https://stackblitz.com/edit/angular-gqujak