Comments (3)
How can I close dialog on back button pressed? and prevent back action in navigator?
Not the best way to use modals and this question is more related to StackOverflow 🙂
For a native solution, you can use popstate
event or beforeunload
I think
https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event
window.addEventListener('beforeunload', (event) => {
event.preventDefault();
event.returnValue = '';
// close your modal
modal.close();
});
OR
If you are using react-router
& history
check
https://medium.com/@subwaymatch/disabling-back-button-in-react-with-react-router-v5-34bb316c99d7
⭐️ The main idea is to catch this event, cancel it, and at that moment close the modal window using modal.close()
;
from mui-modal-provider.
@Quernest maybe we can add wrapper function for showModal function in the useModal hook. This wrapper will track modal ids which were created in some component. And in useModal hook we will use useEffect to find out when component which created some modals is destroyed. And when it is destroyed we can use destroyModal to close modals created by this component?
Because if we do not close modals manually when browser back button it is pressed and some component which created modals is destroyed we can have different issues.
Great idea, I'll do it soon, thanks!
from mui-modal-provider.
@Quernest maybe we can add wrapper function for showModal function in the useModal hook. This wrapper will track modal ids which were created in some component. And in useModal hook we will use useEffect to find out when component which created some modals is destroyed. And when it is destroyed we can use destroyModal to close modals created by this component?
Because if we do not close modals manually when browser back button it is pressed and some component which created modals is destroyed we can have different issues.
from mui-modal-provider.
Related Issues (20)
- peerDeps issues HOT 1
- "Cannot read property 'props' of undefined" error if component unmounts before onClose is called HOT 1
- Nested dialog bug HOT 1
- Unhandled missed modal ID scenario
- MUI Dialog API changed HOT 2
- 🐛 Missing 'dist/modal.esm.js' in package HOT 2
- hideModal() from within Dialog component HOT 6
- Rerenders all components HOT 4
- Missing export for typescript types
- Support with React 18 HOT 1
- disableBackdropClick HOT 2
- Rendering a lazy-loaded dialog? HOT 2
- Do not destroy modal on component unmount HOT 5
- useModal is not a function HOT 2
- destroy is always called regardless of options. HOT 2
- How to close current modal and open another modal in parallel? HOT 4
- Throw an error in case Provider not being used HOT 19
- Make it possible to disable provider check errors
- Disable closing on backdrop click HOT 2
- Backdrop click HOT 1
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 mui-modal-provider.