Comments (2)
Short answer: Yes, it should close when you click outside.
Long answer: The popup container is supposed to cover the whole area of a page with the actual popup floating inside of it. The outside click handler is attached to the container. The main reason why the container should cover the whole page is because you can have a transparent background on it that acts as an overlay. You can make a transparent overlay by setting "noOverlay" to true.
We should definitely add documentation regarding styling of the component. In the next release we will also add inline css as a feature to make things easier and more in line with the "react way" of styling components.
Hope that answers your question and thanks for using it. Let me know if you find any other bugs or maybe have som feature requests. And as always, PRs are always welcome and appreciated.
from react-popup.
Gotcha, that makes sense. Thanks! It appears that the problem I have is that there are no styles on the container, so it has a height/width of 0.
Either way, I think that for my use case, I'll need to go a different route. I'm using the component purely for popovers (like the example on the demo page), and having the container cover the whole page prevents users from doing other things, such as selecting text or clicking links; they would need to first click outside of the popup in order to do anything else.
I've been meaning to try to contribute to more OSS, so if I have something I'd like to add to this, I'll be sure to do it 😁
from react-popup.
Related Issues (20)
- "keymaster" package dependency missing in npm HOT 1
- Can't resolve 'keymaster' HOT 1
- Provide the possibility to set the callback when popup is closed not by clicking on the footer buttons HOT 2
- Error when adding popup to project HOT 3
- Properties lost when creating plugins HOT 1
- Can't call setState (or forceUpdate) on an unmounted component HOT 2
- EventEmitter memory leak HOT 3
- How to style text in the popup HOT 1
- wildClasses is no longer supported in version 0.9.3 HOT 1
- Uncaught TypeError: Cannot read property 'key' of undefined HOT 4
- Closing popup with back button HOT 1
- Callback for popup.close() HOT 1
- CSS styles acting differently in development vs production HOT 1
- Focus on a field
- React Popup does not access update state value
- How to use stylesheet? HOT 1
- Callback on click outside/dismiss or prevent click outside?
- typescript support
- Test HOT 1
- Missed `events` package causes crash
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-popup.