search

nolanlawson / emoji-picker-element

A lightweight emoji picker for the modern web
https://nolanlawson.github.io/emoji-picker-element/
Apache License 2.0
1.51k stars 88 forks source link

[Bug]: the tabpanel element doesn't scroll properly within Radix popover component #438

Closed vadymstebakov closed 3 months ago

vadymstebakov commented 3 months ago

I've tried to use emoji-picker-element within Radix popover component in my React application. The tabpanel element doesn't scroll properly if we set modal={true} property for the Popover.Root component. I think this happens because Radix popover always sets certain styles for other elements on the current page.

Link to the sandbox.

nolanlawson commented 3 months ago

Indeed, it looks like Radix is adding a wheel listener that is causing the mousewheel to no longer scroll the tabpanel. (On Chromium on Linux, I can still scroll by clicking-and-dragging the scrollbar itself.)

If you click "Toggle Passive" in the Event Listeners section of the Chrome DevTools, you can confirm for yourself that the scrolling is fixed:

Screenshot from 2024-08-15 17-45-43

I'm not sure what exactly emoji-picker-element could do to resolve this issue – this seems to be an issue with Radix itself. It should ideally use passive event listeners for whatever it is doing, so that scrolling is not blocked (or offer an option to disable it).

Closing this issue; please feel free to file an issue on Radix!