Back button

[sm2017]

How can I close dialog on back button pressed? and prevent back action in navigator?

[Quernest]

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();

[pavelspichonak]

@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.

[Quernest]

@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!