Use native event handling for keydown

This allows us to stopPropogation and actually prevent global hotkeys

js/components/App.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { connect } from "react-redux";
-import Emitter from "../emitter";
 import {
   WindowId,
   AppState,

js/components/FocusTarget.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useRef, useEffect } from "react";
 import { WindowId, AppState, Dispatch } from "../types";
 import * as Actions from "../actionCreators";
 import * as Selectors from "../selectors";
@@ -12,7 +12,7 @@ interface StateProps {
 }
 
 interface OwnProps {
-  onKeyDown?(e: React.KeyboardEvent<HTMLDivElement>): void;
+  onKeyDown?(e: KeyboardEvent): void;
   windowId: WindowId;
   children: React.ReactNode;
 }
@@ -21,24 +21,32 @@ type Props = StateProps & DispatchProps & OwnProps;
 
 function FocusTarget(props: Props) {
   const { onKeyDown, focusedWindowId, windowId, setFocus, children } = props;
-  const keyDownHandler = useCallback(
-    e => {
-      if (windowId === focusedWindowId && onKeyDown != null) {
-        onKeyDown(e);
-      }
-    },
-    [onKeyDown, windowId, focusedWindowId]
-  );
 
   const focusHandler = useCallback(() => {
     if (windowId !== focusedWindowId) {
       setFocus(windowId);
     }
-  }, [windowId, focusedWindowId]);
+  }, [windowId, focusedWindowId, setFocus]);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const { current } = ref;
+    if (current == null) {
+      return;
+    }
+    const listener = (e: KeyboardEvent) => {
+      if (windowId === focusedWindowId && onKeyDown != null) {
+        onKeyDown(e);
+      }
+    };
+    current.addEventListener("keydown", listener);
+    return () => current.removeEventListener("keydown", listener);
+  }, [onKeyDown, windowId, focusedWindowId]);
 
   return (
     <div
-      onFocus={keyDownHandler}
+      ref={ref}
       onMouseDown={focusHandler}
       tabIndex={-1}
       style={{ height: "100%", width: "100%" }}

js/components/GenWindow/index.tsx

@@ -41,7 +41,7 @@ interface OwnProps {
   windowId: WindowId;
   children: (windowSize: WindowSize) => React.ReactNode;
   title: string;
-  onKeyDown?(e: React.KeyboardEvent<HTMLDivElement>): void;
+  onKeyDown?(e: KeyboardEvent): void;
 }
 
 interface DispatchProps {
@@ -72,11 +72,10 @@ export const GenWindow = ({
   onKeyDown,
 }: Props) => {
   return (
-    <FocusTarget windowId={windowId}>
+    <FocusTarget windowId={windowId} onKeyDown={onKeyDown}>
       <div
         className={classnames("gen-window", "window", { selected })}
         style={{ width, height }}
-        onKeyDown={onKeyDown}
       >
         <div className="gen-top draggable">
           <div className="gen-top-left draggable" />

js/components/MainWindow/index.tsx

@@ -13,7 +13,6 @@ import { getWindowShade } from "../../selectors";
 import DropTarget from "../DropTarget";
 import MiniTime from "../MiniTime";
 
-import { SET_FOCUSED_WINDOW } from "../../actionTypes";
 import ClickedDiv from "../ClickedDiv";
 import ContextMenuTarget from "../ContextMenuTarget";
 import Visualizer from "../Visualizer";

js/components/MilkdropWindow/PresetOverlay.tsx

@@ -180,6 +180,8 @@ class PresetOverlay extends React.Component<Props, State> {
     }
     return (
       <div
+        ref={node => node != null && node.focus()}
+        tabIndex={-1}
         style={OUTER_WRAPPER_STYLE}
         onKeyDown={this._handleFocusedKeyboardInput}
       >

js/components/MilkdropWindow/index.tsx

@@ -60,7 +60,7 @@ function useKeyHandler(props: Props) {
   } = props;
   // Handle keyboard events
   return useCallback(
-    (e: React.KeyboardEvent<HTMLDivElement>) => {
+    (e: KeyboardEvent) => {
       switch (e.keyCode) {
         case 32: // spacebar
           selectNextPreset();