diff --git a/js/components/App.tsx b/js/components/App.tsx index d6519175..f24ceb82 100644 --- a/js/components/App.tsx +++ b/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, diff --git a/js/components/FocusTarget.tsx b/js/components/FocusTarget.tsx index 655c6def..87e8b8c3 100644 --- a/js/components/FocusTarget.tsx +++ b/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): 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(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 (
React.ReactNode; title: string; - onKeyDown?(e: React.KeyboardEvent): void; + onKeyDown?(e: KeyboardEvent): void; } interface DispatchProps { @@ -72,11 +72,10 @@ export const GenWindow = ({ onKeyDown, }: Props) => { return ( - +
diff --git a/js/components/MainWindow/index.tsx b/js/components/MainWindow/index.tsx index 4b8a0004..f97ba3d8 100644 --- a/js/components/MainWindow/index.tsx +++ b/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"; diff --git a/js/components/MilkdropWindow/PresetOverlay.tsx b/js/components/MilkdropWindow/PresetOverlay.tsx index 69df81e2..a0c5ec12 100644 --- a/js/components/MilkdropWindow/PresetOverlay.tsx +++ b/js/components/MilkdropWindow/PresetOverlay.tsx @@ -180,6 +180,8 @@ class PresetOverlay extends React.Component { } return (
node != null && node.focus()} + tabIndex={-1} style={OUTER_WRAPPER_STYLE} onKeyDown={this._handleFocusedKeyboardInput} > diff --git a/js/components/MilkdropWindow/index.tsx b/js/components/MilkdropWindow/index.tsx index db6ac183..a697ec67 100644 --- a/js/components/MilkdropWindow/index.tsx +++ b/js/components/MilkdropWindow/index.tsx @@ -60,7 +60,7 @@ function useKeyHandler(props: Props) { } = props; // Handle keyboard events return useCallback( - (e: React.KeyboardEvent) => { + (e: KeyboardEvent) => { switch (e.keyCode) { case 32: // spacebar selectNextPreset();