fix: global event handlers called from windows (#2195)

ui/client/bootstrap.tsx

@@ -2,7 +2,6 @@ import {WindowManagerProvider} from "@touk/window-manager"
 import {defaultsDeep} from "lodash"
 import React, {Suspense} from "react"
 import ReactDOM from "react-dom"
-import Modal from "react-modal"
 import {Provider} from "react-redux"
 import {Router} from "react-router-dom"
 import {PersistGate} from "redux-persist/integration/react"
@@ -22,10 +21,9 @@ import {contentGetter} from "./windowManager"
 
 const {store, persistor} = configureStore()
 const rootContainer = document.createElement(`div`)
+rootContainer.id = "root"
 document.body.appendChild(rootContainer)
 
-Modal.setAppElement(rootContainer)
-
 const Root = () => (
   <DragArea>
     <Suspense fallback={<LoaderSpinner show/>}>

ui/client/containers/BindKeyboardShortcuts.tsx

@@ -20,14 +20,13 @@ export function BindKeyboardShortcuts({disabled}: { disabled?: boolean }): JSX.E
     BACKSPACE: userActions.delete,
   }), [userActions])
 
-  const copyPasteHandlers = useMemo(() => ({
-    keydown: event => isInputEvent(event) || !disabled && keyHandlers[event.key.toUpperCase()]?.(event),
+  const eventHandlers = useMemo(() => ({
+    keydown: event => isInputEvent(event) || keyHandlers[event.key.toUpperCase()]?.(event),
     copy: event => userActions.copy ? userActions.copy(event) : null,
     paste: event => userActions.paste ? userActions.paste(event) : null,
     cut: event => userActions.cut ? userActions.cut(event) : null,
-  }), [disabled, keyHandlers, userActions])
-
-  useDocumentListeners(!disabled && copyPasteHandlers)
+  }), [keyHandlers, userActions])
+  useDocumentListeners(!disabled && eventHandlers)
 
   return null
 }

ui/client/containers/useDocumentListeners.tsx

@@ -1,23 +1,34 @@
-import {useEffect} from "react"
-import {useDispatch} from "react-redux"
+import {useEffect, useMemo} from "react"
 
 type Listener<K extends keyof DocumentEventMap> = (event: DocumentEventMap[K]) => void
 export type DocumentListeners = {
   [K in keyof DocumentEventMap]?: Listener<K> | false
 }
 
+const filterEventsByContainer = (container: HTMLElement) => <K extends keyof DocumentEventMap>(listener: Listener<K>): Listener<K> => (event) => {
+  const path = event.composedPath() || []
+  const rootElements = [window, document, document.documentElement, document.body]
+  const parents = path.filter(t => ![event.target, ...rootElements].includes(t))
+  // allow events from root
+  // ignore all events from outside of container (modals, overlays, etc)
+  if (!parents.length || parents.includes(container)) {
+    return listener(event)
+  }
+}
+
 export function useDocumentListeners(listeners: DocumentListeners): void {
-  const dispatch = useDispatch()
+  const filterByRoot = useMemo(() => filterEventsByContainer(document.getElementById("root")), [])
   useEffect(
     () => {
       const entries = Object.entries(listeners).map(([type, listener]) => {
         if (listener) {
-          document.addEventListener(type, listener)
-          return () => document.removeEventListener(type, listener)
+          const wrapped = filterByRoot(listener)
+          document.addEventListener(type, wrapped)
+          return () => document.removeEventListener(type, wrapped)
         }
       })
       return () => entries.forEach(unbind => unbind())
     },
-    [listeners],
+    [filterByRoot, listeners],
   )
 }

ui/client/package.json

@@ -87,7 +87,6 @@
     "react-json-tree": "^0.15.0",
     "react-ladda": "~6.0.0",
     "react-markdown": "^5.0.3",
-    "react-modal": "3.14.3",
     "react-notification-system": "~0.4.0",
     "react-notification-system-redux": "^2.0.1",
     "react-redux": "7.2.5",
@@ -166,7 +165,6 @@
     "@types/react-dom": "^17.0.9",
     "@types/react-highlight-words": "^0.16.3",
     "@types/react-inspector": "^4.0.2",
-    "@types/react-modal": "^3.12.0",
     "@types/react-redux": "7.1.18",
     "@types/react-router-dom": "5.1.8",
     "@types/react-select": "^3.1.2",