headlessui icon indicating copy to clipboard operation
headlessui copied to clipboard

Non-passive wheel event listener warning in ListboxOptions (Chrome performance warning)

Open RudraMudra opened this issue 2 months ago • 1 comments

When using the <ListboxOptions> component from Headless UI in a React project, Chrome DevTools shows a warning:

[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.

Package: @headlessui/react

Version: v2.2.7

Browser: Chrome (latest)

Steps to reproduce:

  1. Render a Listbox with enough options to enable scrolling.
  2. Open Chrome DevTools and scroll the dropdown.
  3. Observe the warning in the console.

Expected behavior: No warning should appear; the wheel event listener should be marked as { passive: true } for better scroll performance.

Actual behavior: Chrome warns about a non-passive wheel event listener.

Image

RudraMudra avatar Oct 09 '25 05:10 RudraMudra