diff --git a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
index ec016068e9..6a764a85e2 100644
--- a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
+++ b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
@@ -16,6 +16,24 @@ export const ModalDialog = (props: ModalDialogProps) => {
     modal.current.focus()
   }, [props.hide])
 
+  useEffect(() => {
+    function handleBlur (e) {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        e.stopPropagation()
+        if (document.activeElement !== this) {
+          handleHide()
+        }
+      }
+    }
+    if (modal.current) {
+      modal.current.addEventListener('blur', handleBlur)
+
+      return () => {
+        modal.current.removeEventListener('blur', handleBlur)
+      }
+    }
+  }, [modal.current])
+
   const modalKeyEvent = (keyCode) => {
     if (keyCode === 27) { // Esc
       if (props.cancelFn) props.cancelFn()
@@ -40,13 +58,6 @@ export const ModalDialog = (props: ModalDialogProps) => {
     handleHide()
   }
 
-  const handleBlur = (e) => {
-    if (!e.currentTarget.contains(e.relatedTarget)) {
-      e.stopPropagation()
-      handleHide()
-    }
-  }
-
   return (
     <div
       data-id={`${props.id}ModalDialogContainer-react`}
@@ -58,7 +69,6 @@ export const ModalDialog = (props: ModalDialogProps) => {
     >
       <div className="modal-dialog" role="document">
         <div
-          onBlur={handleBlur}
           ref={modal}
           tabIndex={-1}
           className={'modal-content remixModalContent ' + (props.modalClass ? props.modalClass : '')}