feat: Added virtualization component#2222
Open
rkaraivanov wants to merge 22 commits into
Open
Conversation
- Use a Binary Indexed Tree for efficient range calculations in the virtualization engine. - Update the virtualization component to utilize the new engine and optimize DOM queries by using part selectors instead of class selectors. - Adjust unit tests to reflect changes in the component structure and ensure they target the correct elements.
Updated the combo test suite.
ChronosSF
self-requested a review
July 21, 2026 14:10
Contributor
There was a problem hiding this comment.
Pull request overview
Introduces a new igc-virtual-scroll component to provide in-house list virtualization and wires it into the Combo component to replace the previous @lit-labs/virtualizer-based implementation.
Changes:
- Added a new virtualization engine +
igc-virtual-scrollcomponent, along with Storybook stories and unit tests. - Updated Combo to use
igc-virtual-scrollfor its dropdown list (types, navigation behavior, styles, and tests updated accordingly). - Improved test stability/logging by centralizing ResizeObserver-loop suppression and filtering benign
nullbrowser logs in web-test-runner output.
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| web-test-runner.config.mjs | Adds a custom reporter to filter benign null browser logs before the default reporter runs. |
| stories/virtual-scroll.stories.ts | New Storybook stories demonstrating vertical/horizontal, variable size, and remote-data virtualization scenarios. |
| src/index.ts | Exports the new virtual scroll component and its public types/events. |
| src/components/virtualization/virtualization.ts | New igc-virtual-scroll Lit component integrating the engine, measurements, scrolling API, and events. |
| src/components/virtualization/virtualization.spec.ts | New tests for accessibility, events, public API, engine integration, and RTL behavior. |
| src/components/virtualization/types.ts | Defines public types: item context, state snapshot, and data request payload. |
| src/components/virtualization/engine.ts | New virtualization math engine (Fenwick tree/BIT-based sizing + visible-range computations). |
| src/components/common/utils.spec.ts | Adds shared suppressResizeObserverLoopError() helper for tests. |
| src/components/combo/types.ts | Switches Combo render-function typing to use the new virtual scroll item template type. |
| src/components/combo/themes/combo.base.scss | Adjusts list sizing styles to work with the new virtual scroll list element. |
| src/components/combo/controllers/navigation.ts | Updates scrolling behavior to use scrollToIndex() instead of scrollIntoView(). |
| src/components/combo/combo.ts | Replaces igc-combo-list with igc-virtual-scroll and adapts rendering/theming integration. |
| src/components/combo/combo.spec.ts | Updates Combo tests to await virtual scroll layoutComplete and query the new list element. |
| src/components/combo/combo-list.ts | Removes the old LitVirtualizer-based igc-combo-list component. |
| src/components/chat/chat.spec.ts | Uses the shared ResizeObserver-loop suppression helper. |
Member
|
@rkaraivanov , I am noticing a potentially faulty behavior. So I added a virtualization combo story (with opus, we can remove it later) in the storybook with some controls. When navigating by index, the item, while in the rendered frame is actually not in the view frame. You can reproduce it by either scrolling to the middle with the button or by searching for a specific item. |
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 16 out of 16 changed files in this pull request and generated 1 comment.
Comments suppressed due to low confidence (2)
src/components/virtualization/virtualization.ts:309
aria-hidden="true"on the track element hides all rendered items from the accessibility tree (including when the host is used as arole="listbox"in combo), which can make options undiscoverable to screen readers.
<div part="igc-vs-track" style=${styleMap(trackStyle)} aria-hidden="true">
src/components/virtualization/virtualization.ts:473
scrollToIndex()acceptsScrollIntoViewOptions, but it forwards those options intoElement.scrollTo(), which expectsScrollToOptions. This is already causing callers to passblock: 'center', which has no effect and is misleading.
/** Programmatically scrolls to the specified item index. */
public scrollToIndex(index: number, options?: ScrollIntoViewOptions): void {
const offset = this._engine.getScrollOffsetForIndex(index);
…eUI/igniteui-webcomponents into rkaraivanov/virtualization
rkaraivanov
marked this pull request as ready for review
July 22, 2026 06:42
…rollToIndex Fix VirtualScrollEngine's BIT.findIndexAtOffset returning idx - 1, which could resolve to the wrong item near large scroll offsets. scrollToIndex now iteratively re-aligns the scroll position after waiting for the scroll to settle and layout to complete, correcting for the gap between estimated and measured item sizes until the offset stabilizes. This fixes scrolling landing past the requested index in large lists (e.g. combo's virtualized dropdown) before all items in between have been measured. Adds a scroll request id so overlapping scrollToIndex calls no longer race each other, and removes a stray aria-hidden on the track element. Add tests covering index alignment with under-estimated item sizes, including a large-list smooth-scroll scenario.
Member
Author
|
@ChronosSF |
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 17 out of 17 changed files in this pull request and generated 2 comments.
Comments suppressed due to low confidence (1)
src/components/common/util.ts:60
- Typo in the
asNumberJSDoc example:asNUmbershould beasNumberso the snippet is copy/pasteable.
* asNUmber('five', 5); // 5
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 17 out of 17 changed files in this pull request and generated 1 comment.
Comments suppressed due to low confidence (1)
src/components/common/util.ts:60
- Doc example has a typo (
asNUmber) which could confuse users and breaks copy/paste usage. Please correct it toasNumber.
* asNUmber('five', 5); // 5
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Added virtualization component
NOTE: There is still work to be done around the default styles and the style(sheet) integration
around the theming stack/usage of the component in other shadow roots.
Type of Change
Checklist