Comments (12)
Same issue here, started when I upgraded to 7.1.0. I tried reverting the change in 11096b5 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.
from react-tiny-popover.
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!
from react-tiny-popover.
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.
from react-tiny-popover.
from react-tiny-popover.
@KorySchneider @alexkatz
Thank you for your work.
Did this pr solve this issue?
from react-tiny-popover.
@YuitoSato I will test the new version soon and let you know, thanks!
from react-tiny-popover.
@YuitoSato Sorry I thought a new version had been released. The link in your comment is not to a PR.
from react-tiny-popover.
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!
from react-tiny-popover.
@alexkatz Tested and it's working. Many thanks!
from react-tiny-popover.
Thank you for your works! @alexkatz
from react-tiny-popover.
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.
from react-tiny-popover.
@cs-ashiqu I looked at your example and unfortunately am not sure why it isn't working properly 🙁
from react-tiny-popover.
Related Issues (20)
- Is there a way to position the popover with left and top instead of using translate ? HOT 3
- Wrong children position when containerStyle
- Module `react/jsx-runtime` not found HOT 4
- Could the Popover be controlled by a click event? HOT 2
- Wrong location for left/right positions when some parent has position:absolute HOT 1
- parentElement doesn't work HOT 3
- Question: is this library still maintained? HOT 1
- Reposition doesn't work with the latest version HOT 1
- Problem with rollup: 'syntheticNamedExports: "__moduleExports"' needs an explicit export named "__moduleExports" that does not reexport an unresolved named export of the same module. HOT 1
- Breaking change from 7.0.1 -> 7.1.0 - Nested Popovers and onClickOutside boundary calculation HOT 1
- Popover appears at top left of the screen HOT 3
- Callback for when position changes HOT 1
- positions in decimals causes blurry popover contents HOT 1
- request for onScrollOutside
- Support RTL alignment
- Not work in a shadow root
- DOMRect is not defined HOT 2
- React 18 with Next.js breaks tiny-popover HOT 3
- Best way to have parentElement be the actual parent when rendering a list?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-tiny-popover.