Focus Moves During Virtual Scrolling in Grid and TreeList
Environment
| Product | Progress® Kendo UI® for Angular Grid Progress® Kendo UI® for Angular TreeList |
Description
When the Grid or TreeList is navigable and virtual scrolling is enabled, the focus of the currently active cell moves to a different visible cell while scrolling.
Cause
During virtual scrolling, paging is triggered periodically when a new portion of data needs to be fetched and displayed in the visible part of the component.
When the data item associated with the currently active/focused cell is no longer present in the DOM due to this virtualization process, the focus automatically moves to the first available item in the DOM.
Solution
This behavior is expected for components with virtual scrolling and keyboard navigation enabled. The automatic focus movement ensures that:
- The focus remains within the visible viewport.
- Users can continue navigating without losing keyboard accessibility.
- Performance is maintained by only rendering visible rows.
If you need to avoid this focus movement behavior, consider the following alternatives:
- Disable keyboard navigation—Set the
navigableproperty tofalseto prevent the focus movement during virtual scrolling. - Use
contentScrollevent—Handle thecontentScrollevent and move focus silently away from the cell when it goes out of the viewport:typescriptpublic onContentScroll(event: ContentScrollEvent): void { const activeCell = this.grid.activeCell; if (activeCell) { const { startRow, endRow } = event; // If the focused cell is outside the visible range, blur it if (activeCell.rowIndex - 1 <= startRow || activeCell.rowIndex > endRow) { const activeElement = document.activeElement as HTMLElement; if (activeElement) { activeElement.blur(); } } } }