headlessui
headlessui copied to clipboard
Non-passive wheel event listener warning in ListboxOptions (Chrome performance warning)
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:
- Render a Listbox with enough options to enable scrolling.
- Open Chrome DevTools and scroll the dropdown.
- 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.