Comments (5)
Same issue for me too - invisible popovers are getting stuck on screen that can still be interacted with and block the content behind. I can't reproduce it consistently so I haven't been able to narrow down the circumstances when it is occurring. Seems like it may have something to do with the page scrolling while the popover is hiding? Mousing over and out doesn't hide it for me.
from react-tiny-popover.
Created a PR with a potential fix for this. Would appreciate if someone can tell me if this is the wrong approach to a solution. It feels hacky, but it works.
#56
from react-tiny-popover.
@djfariel
I have possibly the same issue; moving the mouse over the popover content (away from target) does hide it, but it remains invisibly in the DOM i.e. not able to click components behind it
from react-tiny-popover.
Transition duration is the culprit, check: #61
Possible fix:
if (!this.willUnmount || transitionDuration > 0) {
this.removePopoverTimeout = window.setTimeout(remove, (transitionDuration || Constants.FADE_TRANSITION) * 1000);
} else {
remove();
}
As you can see remove is called after transitionDuration, sometimes callback is not called, some weird behavior is making setTimeout not calling the callback, there are libraries to replace setTimeout for something else which makes it to be always executed, the problem could be a combination of calling setState and few more things, but the final issue is that setTimeout is not reliable for some reason.
I don't really care about using transitionDuration, so zero is a value that will fix all problems if it can be supported.
Issue 61 has been sitting there for a some time, so we may need to live with our forks.
from react-tiny-popover.
This should be fixed in version 6, which is a fairly substantial overhaul to the Popover
component, now fully functional and hooks-based. Give it a look when you get the chance! I'll close this for now, but will reopen if the issue somehow reappears.
from react-tiny-popover.
Related Issues (20)
- 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
- Problem: clicking a popover on a popover closes the bottom popover. HOT 12
- 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?
- Popover within <dialog>
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.