I am working to solve an bug in an open source project, emoji-mart. The emoji-picker is originally a webcomponent in (packages/emoji-mart) (pure component with preact), but they provide a react wrapper for it in packages/emoji-mart-react. I’ve been trying to solve this problem tldr: When a button in react is clicked to open the emoji-picker, it opens the first time. It renders so an eventlistener with document.addEventListener('click, handleOutsideClick) is added, when you click anywhere outside the emoji-picker, it closes, and I see in devtools that the event handler is removed from the <html> tag. When I go to click on the button to open it again, the functionality of the ‘supposedly’ removed event listener seems to have transferred to the button (I know this because I have added a print statement in handleClickOutside, Everywhere outside of the button nothing prints.). This causes the emoji-picker never to open again. I think this problem has to do with react synthetic events.
I have kinda found a way to fix this, I reverse the order of the bubbling, capture. This is not a good solution though because this causes it so that the synthetic event to close is called first and then open, so this causes it to never close anymore when you click on the button (it does close though when not clicked on btn).