search

alexkatz / react-tiny-popover

A simple and highly customizable popover react higher order component with no other dependencies! Typescript friendly.
MIT License
447 stars 119 forks source link

`onClickOutside` isn't fired when clicking react-native buttons (Button, Pressable, etc). #137

Closed kirbyfu closed 10 months ago

kirbyfu commented 3 years ago

I'm currently hiding a popover when the user clicks outside by using onClickOutside. This generally works but when clicking other react-native buttons, onClickOutside isn't triggered (react native buttons stops propagation to prevent click bubbling).

Would changing this line to listen to the capture phase be reasonable?

window.addEventListener('click', handleOnClickOutside, true);

Or perhaps adding onClickOutsideCapture if backwards compatibility is an issue.

Sandbox example showing issue: https://codesandbox.io/s/musing-tharp-tjo25?file=/src/App.js

carlostpg commented 10 months ago

It appears this suggestion was incorporated at some point.

https://github.com/alexkatz/react-tiny-popover/blob/master/src/Popover.tsx#L183

Use clickOutsideCapture to control "the useCapture option passed along as the third argument to the internal window.addEventListener used by onClickOutside."

alexkatz commented 10 months ago

@carlostpg You are correct. This prop is included in the docs as well. My apologies for leaving this issue open. I'll close this issue for now!