Trap focus

js/components/FocusTarget.tsx

@@ -39,6 +39,25 @@ function FocusTarget(props: Props) {
     return () => current.removeEventListener("keydown", onKeyDown);
   }, [onKeyDown, windowId, focusedWindowId]);
 
+  useEffect(() => {
+    const { current } = ref;
+    if (current == null || windowId !== focusedWindowId) {
+      return;
+    }
+
+    // I give up. I can't figure out how to type this.
+    const out: EventListener = (e: any) => {
+      if (!(e.currentTarget as Element).contains(e.relatedTarget as Element)) {
+        current.focus();
+      }
+    };
+    // https://github.com/facebook/react/issues/6410
+    // React does not implement focusout. In this case we prefer focusout to
+    // blur because it gets triggered when a child with focus unmounts.
+    current.addEventListener("focusout", out);
+    return () => current.removeEventListener("focusout", out);
+  }, [windowId, focusedWindowId]);
+
   return (
     <div
       ref={ref}

js/components/MilkdropWindow/PresetOverlay.tsx

@@ -169,6 +169,12 @@ class PresetOverlay extends React.Component<Props, State> {
     this.props.appendPresetFileList(fileReferences);
   }
 
+  _handleNode = (node: HTMLDivElement | null) => {
+    if (node != null && document.activeElement !== node) {
+      node.focus();
+    }
+  };
+
   render() {
     const { height, width } = this.props;
     if (this.props.presetKeys == null) {
@@ -180,7 +186,7 @@ class PresetOverlay extends React.Component<Props, State> {
     }
     return (
       <div
-        ref={node => node != null && node.focus()}
+        ref={this._handleNode}
         tabIndex={-1}
         style={OUTER_WRAPPER_STYLE}
         onKeyDown={this._handleFocusedKeyboardInput}