Merge pull request #4456 from ethereum/yann300-patch-54

Fix handling modal blur

libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx

@@ -26,24 +26,25 @@ export const ModalDialog = (props: ModalDialogProps) => {
   useEffect(() => {
     calledHideFunctionOnce.current = props.hide
     modal.current.focus()
+
+    if (modal.current) {
+      modal.current.removeEventListener('blur', handleBlur)
+      modal.current.addEventListener('blur', handleBlur)
+    }
+    return () => {
+      modal.current && modal.current.removeEventListener('blur', handleBlur)
+    }
   }, [props.hide])
 
-  useEffect(() => {
   function handleBlur(e) {
     if (!e.currentTarget.contains(e.relatedTarget)) {
       e.stopPropagation()
       if (document.activeElement !== this) {
         !window.testmode && handleHide()
+        !window.testmode && props.cancelFn && props.cancelFn()
       }
     }
   }
-    if (modal.current) {
-      modal.current.addEventListener('blur', handleBlur)
-    }
-    return () => {
-      modal.current && modal.current.removeEventListener('blur', handleBlur)
-    }
-  }, [modal.current])
 
   const modalKeyEvent = (keyCode) => {
     if (keyCode === 27) {