[BUG] - Autocomplete section overlap due to incorrect itemHeight with virtualization

[thatkev]

NextUI Version

2.6.11

Describe the bug

AutocompleteSection, when containing too many AutocompleteItems, seems to have the category text (and occasional items) overlap. This behaviour is pertinent to all tested major browsers (Chromium-based browsers, Safari, Firefox).

Your Example Website or App

https://stackblitz.com/~/github.com/thatkev/autocomplete-bug
https://github.com/thatkev/autocomplete-bug

Steps to Reproduce the Bug or Issue

1. Start dev server, visit the root page.
2. Click the dropdown, scroll and observe the bug.

Expected behavior

I expect that AutocompleteSection and AutocompleteItem are appropriately spaced, and do not overlap.

Screenshots or Videos

Operating System Version

macOS Sequoia 15.3 Beta (24D5034f)

Browser

Chrome

[linear]

ENG-1895 [BUG] - Autocomplete section overlap

[jrgarciadev]

@wingkwong please check

[thatkev]

Issue cause has been pinpointed to virtualization- disabling it resolves the issue.

[GuntreddyHemanth]

@jrgarciadev Please assign it to me!

[ryo-manba]

The issue occurs because an incorrect itemHeight is being passed during virtualization.

heroui/packages/components/autocomplete/src/use-autocomplete.ts

Lines 460 to 464 in a1cc378

	virtualization: shouldVirtualize
	? {
	maxListboxHeight,
	itemHeight,
	}

Since startContent dynamically changes the list height, the correct itemHeight must be provided.

autocomplete.virtualization.fix.height.mov

---

I’ll update the docs to note that startContent with virtualization requires the correct itemHeight.

Just a side note, I also tried dynamically measuring the list item height and applying it to the virtualizer, but it didn’t work as expected... 😓

[thatkev]

@ryo-manba What if not all items have startContent? Won’t this throw off the formatting?

[ryo-manba]

As it stands, the only option is to set isVirtualized={false}.