Component: Dropdown, Virtual Scroll, filter sometimes is blank on large list

[adamburgess]

Describe the bug

Hello, I am having a problem with using the dropdown and virtual scroll on large lists.
It seems when the selected item is far down the list, and then you type a character to filter the list, the list becomes blank (sometimes.).

This doesn't occur when using the lara-light-blue/theme.css, but it does in our theme. It also doesn't occur when not using virtual scroll.

Our theme has this relevant css:

.p-dropdown-panel .p-dropdown-items {
  padding: 0;
}

The default lara-light-blue has this:

.p-dropdown-panel .p-dropdown-items {
  padding: 0.75rem 0;
}

When padding for the dropdown items is set to anything other than 0, it starts working again.

I can't get stackblitz to work, but I created a minimal repro repo at https://github.com/adamburgess/primeng-dropdown-bug. Hopefully it can load on stackblitz as well: https://stackblitz.com/~/github.com/adamburgess/primeng-dropdown-bug

It creates a list with 3000 items, sets the default to item 2800.

---

What I have found out:

When you type something into the dropdown filter, it runs onFilterInputChange:

primeng/packages/primeng/src/dropdown/dropdown.ts

Lines 1905 to 1915 in d861ae3

	onFilterInputChange(event: Event | any): void {
	let value: string = (event.target as HTMLInputElement).value;
	this._filterValue.set(value);
	this.focusedOptionIndex.set(-1);
	this.onFilter.emit({ originalEvent: event, filter: this._filterValue() });
	!this.virtualScrollerDisabled && this.scroller.scrollToIndex(0);
	setTimeout(() => {
	this.overlayViewChild.alignOverlay();
	});
	this.cd.markForCheck();
	}

On line 1910 it tells the scroller to reset scroll position - this.scroller.scrollToIndex(0)

primeng/packages/primeng/src/scroller/scroller.ts

Lines 733 to 740 in d861ae3

	newFirst = calculateFirst(index as number, numToleratedItems);
	this.horizontal ? scrollTo(calculateCoord(newFirst, itemSize, contentPos.left), scrollTop) : scrollTo(scrollLeft, calculateCoord(newFirst, itemSize, contentPos.top));
	isScrollChanged = this.lastScrollPos !== (this.horizontal ? scrollLeft : scrollTop);
	isRangeChanged = newFirst !== first;
	}
	this.isRangeChanged = isRangeChanged;
	isScrollChanged && (this.first = newFirst);

In scroller, it sets .first if the scroll position has changed. But for some reason, if the dropdown items does not have padding, "isScrollChanged" will be false, and .first is not set.

This causes .first to remain at 2800, but the list could now be filtered to, for example, 500 items, so .last is set to 500. The scroller then tries to show items from 2800 to 500, which is an empty list

.first should be set to 0: the dropdown filter has changed, so we reset the scroll to the first item.

---

Possible fixes

adjust Scroller.scrollToIndex to have a "force" boolean, which will always set .first, and have Dropdown call it with that,
or manually set scroller.first = 0 in Dropdown.onFilterInputChange

Thank you

Environment

Windows

Reproducer

https://stackblitz.com/~/github.com/adamburgess/primeng-dropdown-bug

Angular version

17.2.2

PrimeNG version

17.18.15

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

22.12.0

Browser(s)

Chrome 131.0.6778.140

Steps to reproduce the behavior

Clone https://github.com/adamburgess/primeng-dropdown-bug

• npm install
• run with ng serve
• open the dropdown, it should start on option 2800 (out of 3000)
• enter "1"
• the dropdown list is blank (bug)
• edit src/styles.scss and uncomment padding-top: 1px; and save
• refresh the page
• open the dropdown, enter "1", it now works

Code_5depRXdFLb.mp4

Expected behavior

typing "1" should filter the list to items including 1