[Grids]: ESF value list is empty when reopened after scrolling it to the bottom

[viktorkombov]

Description

In 22.2.0-rc.1 the Excel-style filtering (ESF) value list is rendered by igx-virtual-scroll instead of igxFor. When the ESF is declared in the grid template, the same ESF instance is reused every time it opens. If a long value list is scrolled to the bottom and the ESF is closed, the next open shows an empty value list: no "(Select All)" and no values.

When the ESF opens for a column, the search list resets its scroll with scrollToIndex(0):

igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts

Lines 225 to 227 in 66c09a8

	esf.columnChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
	void this.virtualScroll?.scrollToIndex(0);
	});

The likely cause is that scrollToIndex returns early when the host scrollTop already equals the target offset, which it does once the closed ESF is shown again:

igniteui-angular/projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.ts

Lines 674 to 683 in 66c09a8

	private _scrollAndWaitForEnd(
	offset: number,
	behavior: ScrollBehavior,
	): Promise<void> {
	if (
	!this._isBrowser ||
	Math.abs(this._currentAxisScroll() - offset) < SCROLL_OFFSET_EPSILON_PX
	) {
	return Promise.resolve();
	}

The virtual scroll's own scroll position is only written from scroll events, so it keeps the offset from before the close. The reopened list then renders the rows for that old offset, outside the visible area:

igniteui-angular/projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.ts

Lines 856 to 857 in 66c09a8

	private _handleScroll(): void {
	this._scrollPosition = this._currentAxisScroll();

In 22.1.x the ESF reset the igxFor state directly when the column changed:

igniteui-angular/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts

Lines 214 to 220 in ef6ba51

	esf.columnChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
	this.virtDir?.resetScrollPosition();
	if (this.virtDir) {
	this.virtDir.state.startIndex = 0;
	}
	});

Scope, checked in Chrome:

• Closing with Escape gives the same result as Cancel.
• Reopening a different long column (Quantity Per Unit, Unit Price) also shows an empty list.
• A column with only a few values (Discontinued) reopens correctly, and scrolling the list only partway does not trigger it.
• Only the grid was checked. The tree grid, hierarchical grid and pivot grid use the same search list and were not checked yet.

Framework

Angular

Angular Version

22.1.3

Ignite UI for Angular Version

22.2.0-rc.1

Component / Area

Grid

Browser

Chrome

Operating System

Windows

Command Not Working

Steps to Reproduce

1. Open the following sample: https://stackblitz.com/edit/ruuhaztv?file=src%2Fapp%2Fapp.component.ts
2. Click the filter icon in the Product Name column header.
3. Scroll the value list to the bottom with the mouse wheel.
4. Click Cancel.
5. Click the filter icon in the Product Name column header again.

Actual Result

The value list is empty. "(Select All)" and the product names are not shown.

Expected Result

The value list opens scrolled to the top with "(Select All)" first, as it does on the first open.

Reproduction URL

No response

Attachments

No response