search

alexkatz / react-tiny-popover

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

Problem: clicking a popover on a popover closes the bottom popover. #171

Closed YuitoSato closed 1 year ago

YuitoSato commented 2 years ago

I have trouble that clicking a popover on a popover closes the bottom popover.

Here is how to reproduce it.

  1. click the "toggleBottom" button.
  2. click the blue popover area.
  3. the top popover below will disappear. https://codesandbox.io/s/charming-blackwell-drpkes?file=/src/App.tsx

This commit might be the cause. https://github.com/alexkatz/react-tiny-popover/commit/11096b522d2fe83ba16df02ea1381a83eac91f12

Thank you in advance.

YuitoSato commented 2 years ago

https://github.com/alexkatz/react-tiny-popover/pull/172

KorySchneider commented 1 year ago

Same issue here, started when I upgraded to 7.1.0. I tried reverting the change in https://github.com/alexkatz/react-tiny-popover/commit/11096b522d2fe83ba16df02ea1381a83eac91f12 and it is indeed the culprit.

Those affected must either downgrade to 7.0.1 until this is fixed, or implement quite a bit of logic to prevent this from happening. @alexkatz What are your thoughts this situation? I think it would be best if this behavior was optional, but disabled by default.

YuitoSato commented 1 year ago

@KorySchneider @alexkatz Thank you for your work. Did this pr solve this issue?

https://github.com/alexkatz/react-tiny-popover/commit/7d62b9ba

KorySchneider commented 1 year ago

@YuitoSato I will test the new version soon and let you know, thanks!

KorySchneider commented 1 year ago

@YuitoSato Sorry I thought a new version had been released. The link in your comment is not to a PR.

alexkatz commented 1 year ago

@KorySchneider @YuitoSato

This week I've released 7.2.0, which adds a clickOutsideCapture boolean option, false by default. I'll close this for now, but feel free to create a new issue if you're still experiencing problems in this area.

Cheers!

KorySchneider commented 1 year ago

@alexkatz Tested and it's working. Many thanks!

YuitoSato commented 1 year ago

Thank you for your works! @alexkatz

cs-ashiqu commented 1 year ago

Hi @alexkatz @KorySchneider I also had same issue with nested popovers and was waiting for the new version hoping that would resolve the issue. But I am still facing the same issue with new version too.

Problem: Interacting with nested popover will close the parent popover. Example: https://codesandbox.io/s/wild-brook-6ttx95?file=/src/App.js

Let me know if I am missing something here in my implementation and it would be great if you could suggest a solution for these kind of use cases.

KorySchneider commented 1 year ago

@cs-ashiqu I looked at your example and unfortunately am not sure why it isn't working properly 🙁

alexkatz commented 1 year ago

Hey @cs-ashiqu,

I made a slight modification to your codesandbox to get it working properly: https://codesandbox.io/s/intelligent-ride-g1w9q1?file=/src/App.js

I think the onClickOutside is behaving properly in your sandbox. By clicking on the inner popover, you are indeed clicking outside of the outer one, so the outer one closes.

The solution is to nest the inner popover within the outer one, arranging things such that clicking within the inner popover is not actually clicking outside of the outer.

Hope that makes sense!

alexkatz commented 1 year ago

Sorry, did not mean to reopen this issue. Closing again, but please feel free to create a new issue if you're still experiencing issues.