fix: CMD+F not working on screens with keyboard shortcut guide (#2066)

app/components/InputSearch.js

@@ -1,98 +1,47 @@
 // @flow
-import { observable } from "mobx";
-import { observer } from "mobx-react";
 import { SearchIcon } from "outline-icons";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
-import keydown from "react-keydown";
-import { withRouter, type RouterHistory } from "react-router-dom";
-import styled, { withTheme } from "styled-components";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "styled-components";
 import Input from "./Input";
-import { type Theme } from "types";
-import { meta } from "utils/keyboard";
-import { searchUrl } from "utils/routeHelpers";
 
-type Props = {
-  history: RouterHistory,
-  theme: Theme,
-  source: string,
+type Props = {|
   placeholder?: string,
-  label?: string,
-  labelHidden?: boolean,
-  collectionId?: string,
-  redirectDisabled?: boolean,
-  maxWidth?: string,
-  value: string,
+  value?: string,
   onChange: (event: SyntheticInputEvent<>) => mixed,
-  onKeyDown: (event: SyntheticKeyboardEvent<>) => mixed,
-  t: TFunction,
-};
+  onKeyDown: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
+|};
 
-@observer
-class InputSearch extends React.Component<Props> {
-  input: ?Input;
-  @observable focused: boolean = false;
+export default function InputSearch(props: Props) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const [isFocused, setIsFocused] = React.useState(false);
 
-  @keydown(`${meta}+f`)
-  focus(ev: SyntheticEvent<>) {
-    ev.preventDefault();
+  const handleFocus = React.useCallback(() => {
+    setIsFocused(true);
+  }, []);
 
-    if (this.input) {
-      this.input.focus();
-    }
-  }
+  const handleBlur = React.useCallback(() => {
+    setIsFocused(false);
+  }, []);
 
-  handleSearchInput = (ev: SyntheticInputEvent<>) => {
-    ev.preventDefault();
-    this.props.history.push(
-      searchUrl(ev.target.value, {
-        collectionId: this.props.collectionId,
-        ref: this.props.source,
-      })
-    );
-  };
+  const { placeholder = `${t("Search")}…`, onKeyDown, ...rest } = props;
 
-  handleFocus = () => {
-    this.focused = true;
-  };
-
-  handleBlur = () => {
-    this.focused = false;
-  };
-
-  render() {
-    const { t, redirectDisabled, value, onChange, onKeyDown } = this.props;
-    const { theme, placeholder = `${t("Search")}…` } = this.props;
-
-    return (
-      <InputMaxWidth
-        ref={(ref) => (this.input = ref)}
-        type="search"
-        placeholder={placeholder}
-        onInput={redirectDisabled ? undefined : this.handleSearchInput}
-        value={value}
-        onChange={onChange}
-        onKeyDown={onKeyDown}
-        icon={
-          <SearchIcon
-            color={this.focused ? theme.inputBorderFocused : theme.inputBorder}
-          />
-        }
-        label={this.props.label}
-        labelHidden={this.props.labelHidden}
-        maxWidth={this.props.maxWidth}
-        onFocus={this.handleFocus}
-        onBlur={this.handleBlur}
-        margin={0}
-      />
-    );
-  }
+  return (
+    <Input
+      type="search"
+      placeholder={placeholder}
+      icon={
+        <SearchIcon
+          color={isFocused ? theme.inputBorderFocused : theme.inputBorder}
+        />
+      }
+      onKeyDown={onKeyDown}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      margin={0}
+      labelHidden
+      {...rest}
+    />
+  );
 }
-
-const InputMaxWidth = styled(Input)`
-  max-width: ${(props) => props.maxWidth};
-`;
-
-export default withTranslation()<InputSearch>(
-  withTheme(withRouter(InputSearch))
-);