From 007993608fb25c4d5b0e5efa2d8e97fffb1253c6 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 2 Nov 2022 15:41:39 +0100
Subject: [PATCH] fix(ui) - modal handle browser back button

---
 frontend/app/components/Modal/Modal.tsx | 32 ++++++++++++++++---------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/frontend/app/components/Modal/Modal.tsx b/frontend/app/components/Modal/Modal.tsx
index 9dc622a18..cc1e79e71 100644
--- a/frontend/app/components/Modal/Modal.tsx
+++ b/frontend/app/components/Modal/Modal.tsx
@@ -1,16 +1,26 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import ModalOverlay from './ModalOverlay';
+import { useHistory } from 'react-router';
 
 export default function Modal({ component, props, hideModal }: any) {
-    return component ? (
-        ReactDOM.createPortal(
-            <ModalOverlay hideModal={hideModal} left={!props.right} right={props.right}>
-                {component}
-            </ModalOverlay>,
-            document.querySelector('#modal-root')
-        )
-    ) : (
-        <></>
-    );
+  const history = useHistory();
+
+  useEffect(() => {
+    return history.listen((location) => {
+      if (history.action === 'POP') {
+        document.querySelector('body').style.overflow = 'visible';
+      }
+    });
+  });
+  return component ? (
+    ReactDOM.createPortal(
+      <ModalOverlay hideModal={hideModal} left={!props.right} right={props.right}>
+        {component}
+      </ModalOverlay>,
+      document.querySelector('#modal-root')
+    )
+  ) : (
+    <></>
+  );
 }