From bc8a6885a92b219288a64b141855f81eafdbea47 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 30 Oct 2020 16:03:20 +0300
Subject: [PATCH] Focus input fields on CmdOrCtrl+F

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/input/search-input.tsx         | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/input/search-input.tsx b/src/renderer/components/input/search-input.tsx
index 94f05514f8..a2caf748ca 100644
--- a/src/renderer/components/input/search-input.tsx
+++ b/src/renderer/components/input/search-input.tsx
@@ -1,10 +1,10 @@
 import "./search-input.scss";
 
-import React from "react";
+import React, { createRef } from "react";
 import { t } from "@lingui/macro";
 import { observer } from "mobx-react";
 import { _i18n } from "../../i18n";
-import { cssNames } from "../../utils";
+import { autobind, cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { Input, InputProps } from "./input";
 
@@ -26,6 +26,16 @@ const defaultProps: Partial<Props> = {
 export class SearchInput extends React.Component<Props> {
   static defaultProps = defaultProps as object;
 
+  private input = createRef<Input>();
+
+  componentDidMount() {
+    addEventListener("keydown", this.focus);
+  }
+
+  componentWillUnmount() {
+    removeEventListener("keydown", this.focus);
+  }
+
   clear = () => {
     if (this.props.onClear) {
       this.props.onClear();
@@ -48,6 +58,14 @@ export class SearchInput extends React.Component<Props> {
     }
   }
 
+  @autobind()
+  focus(evt: KeyboardEvent) {
+    const meta = evt.metaKey || evt.ctrlKey;
+    if (meta && evt.key == "f") {
+      this.input.current.focus();
+    }
+  }
+
   render() {
     const { className, compact, closeIcon, onClear, ...inputProps } = this.props;
     const icon = this.props.value
@@ -60,6 +78,7 @@ export class SearchInput extends React.Component<Props> {
         onChange={this.onChange}
         onKeyDown={this.onKeyDown}
         iconRight={icon}
+        ref={this.input}
       />
     )
   }