From 5287ee310dc009c39d1e94fc1c4e4515c8417db4 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Mon, 28 Jan 2019 07:30:03 -0800
Subject: [PATCH] Use existing keyboard event handler for preset overlay

---
 .../MilkdropWindow/PresetOverlay.tsx          | 26 +++++++++++++++----
 js/components/MilkdropWindow/index.tsx        |  8 +++++-
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/js/components/MilkdropWindow/PresetOverlay.tsx b/js/components/MilkdropWindow/PresetOverlay.tsx
index 6ad9ad00..ba5e957a 100644
--- a/js/components/MilkdropWindow/PresetOverlay.tsx
+++ b/js/components/MilkdropWindow/PresetOverlay.tsx
@@ -5,6 +5,7 @@ import * as Actions from "../../actionCreators";
 import { clamp } from "../../utils";
 import { AppState, Dispatch, TransitionType } from "../../types";
 import { connect } from "react-redux";
+import Disposable from "../../Disposable";
 
 const ENTRY_HEIGHT = 14;
 const HEIGHT_PADDING = 15;
@@ -50,14 +51,33 @@ interface DispatchProps {
 interface OwnProps {
   height: number;
   width: number;
+  onFocusedKeyDown(
+    cb: (e: React.KeyboardEvent<HTMLDivElement>) => void
+  ): () => void;
 }
 
 type Props = StateProps & DispatchProps & OwnProps;
 
 class PresetOverlay extends React.Component<Props, State> {
+  _disposable: Disposable;
+
   constructor(props: Props) {
     super(props);
     this.state = { selectedListIndex: 0 };
+    this._disposable = new Disposable();
+  }
+
+  componentDidMount() {
+    this._disposable.add(
+      // Technically we should handle the case where this prop changes, but we don't.
+      // If we convert to hooks for this component, this would get much easier.
+      // _Also_ ideally we could avoid this prop all together.
+      this.props.onFocusedKeyDown(this._handleFocusedKeyboardInput)
+    );
+  }
+
+  componentWillUnmount() {
+    this._disposable.dispose();
   }
 
   _presetIndexFromListIndex(listIndex: number) {
@@ -151,11 +171,7 @@ class PresetOverlay extends React.Component<Props, State> {
       );
     }
     return (
-      <div
-        style={OUTER_WRAPPER_STYLE}
-        onKeyDown={this._handleFocusedKeyboardInput}
-        tabIndex={-1}
-      >
+      <div style={OUTER_WRAPPER_STYLE}>
         <div
           style={{
             ...INNER_WRAPPER_STYLE,
diff --git a/js/components/MilkdropWindow/index.tsx b/js/components/MilkdropWindow/index.tsx
index 52c88bdb..a8b36f4e 100644
--- a/js/components/MilkdropWindow/index.tsx
+++ b/js/components/MilkdropWindow/index.tsx
@@ -83,7 +83,13 @@ function Milkdrop(props: Props) {
     <GenWindow title={"Milkdrop"} windowId={WINDOWS.MILKDROP}>
       {({ height, width }: { width: number; height: number }) => (
         <Background>
-          {props.overlay && <PresetOverlay width={width} height={height} />}
+          {props.overlay && (
+            <PresetOverlay
+              width={width}
+              height={height}
+              onFocusedKeyDown={props.onFocusedKeyDown}
+            />
+          )}
           <Visualizer width={width} height={height} analyser={props.analyser} />
         </Background>
       )}