chore: Remove debounced search (#2625)

* Remove debounced search

* fix hover color on filter options

app/components/FilterOptions.js

@@ -76,11 +76,6 @@ const FilterOptions = ({
   );
 };
 
-const LabelWithNote = styled.div`
-  font-weight: 500;
-  text-align: left;
-`;
-
 const Note = styled(HelpText)`
   margin-top: 2px;
   margin-bottom: 0;
@@ -90,6 +85,15 @@ const Note = styled(HelpText)`
   color: ${(props) => props.theme.textTertiary};
 `;
 
+const LabelWithNote = styled.div`
+  font-weight: 500;
+  text-align: left;
+
+  &:hover ${Note} {
+    color: ${(props) => props.theme.white50};
+  }
+`;
+
 const StyledButton = styled(Button)`
   box-shadow: none;
   text-transform: none;

app/components/InputSearchPage.js

@@ -40,14 +40,20 @@ class InputSearchPage extends React.Component<Props> {
     }
   }
 
-  handleSearchInput = (ev: SyntheticInputEvent<>) => {
+  handleKeyDown = (ev: SyntheticKeyboardEvent<HTMLInputElement>) => {
-    ev.preventDefault();
+    if (ev.key === "Enter") {
-    this.props.history.push(
+      ev.preventDefault();
-      searchUrl(ev.target.value, {
+      this.props.history.push(
-        collectionId: this.props.collectionId,
+        searchUrl(ev.currentTarget.value, {
-        ref: this.props.source,
+          collectionId: this.props.collectionId,
-      })
+          ref: this.props.source,
-    );
+        })
+      );
+    }
+
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(ev);
+    }
   };
 
   handleFocus = () => {
@@ -59,7 +65,7 @@ class InputSearchPage extends React.Component<Props> {
   };
 
   render() {
-    const { t, value, onChange, onKeyDown } = this.props;
+    const { t, value, onChange } = this.props;
     const { theme, placeholder = `${t("Search")}…` } = this.props;
 
     return (
@@ -67,10 +73,9 @@ class InputSearchPage extends React.Component<Props> {
         ref={(ref) => (this.input = ref)}
         type="search"
         placeholder={placeholder}
-        onInput={this.handleSearchInput}
         value={value}
         onChange={onChange}
-        onKeyDown={onKeyDown}
+        onKeyDown={this.handleKeyDown}
         icon={
           <SearchIcon
             color={this.focused ? theme.inputBorderFocused : theme.inputBorder}

app/scenes/Search/Search.js

@@ -1,6 +1,6 @@
 // @flow
 import ArrowKeyNavigation from "boundless-arrow-key-navigation";
-import { debounce, isEqual } from "lodash";
+import { isEqual } from "lodash";
 import { observable, action } from "mobx";
 import { observer, inject } from "mobx-react";
 import { PlusIcon } from "outline-icons";
@@ -31,7 +31,7 @@ import LoadingIndicator from "components/LoadingIndicator";
 import PageTitle from "components/PageTitle";
 import CollectionFilter from "./components/CollectionFilter";
 import DateFilter from "./components/DateFilter";
-import SearchField from "./components/SearchField";
+import SearchInput from "./components/SearchInput";
 import StatusFilter from "./components/StatusFilter";
 import UserFilter from "./components/UserFilter";
 import NewDocumentMenu from "menus/NewDocumentMenu";
@@ -88,8 +88,9 @@ class Search extends React.Component<Props> {
     this.props.history.goBack();
   }
 
-  handleKeyDown = (ev: SyntheticKeyboardEvent<>) => {
+  handleKeyDown = (ev: SyntheticKeyboardEvent<HTMLInputElement>) => {
     if (ev.key === "Enter") {
+      this.updateLocation(ev.currentTarget.value);
       this.fetchResults();
       return;
     }
@@ -117,7 +118,7 @@ class Search extends React.Component<Props> {
     // To prevent "no results" showing before debounce kicks in
     this.isLoading = true;
 
-    this.fetchResultsDebounced();
+    this.fetchResults();
   };
 
   handleTermChange = () => {
@@ -127,9 +128,9 @@ class Search extends React.Component<Props> {
     this.allowLoadMore = true;
 
     // To prevent "no results" showing before debounce kicks in
-    this.isLoading = !!this.query;
+    this.isLoading = true;
 
-    this.fetchResultsDebounced();
+    this.fetchResults();
   };
 
   handleFilterChange = (search: {
@@ -241,15 +242,11 @@ class Search extends React.Component<Props> {
       }
     } else {
       this.pinToTop = false;
+      this.isLoading = false;
       this.lastQuery = this.query;
     }
   };
 
-  fetchResultsDebounced = debounce(this.fetchResults, 500, {
-    leading: false,
-    trailing: true,
-  });
-
   updateLocation = (query: string) => {
     this.props.history.replace({
       pathname: searchUrl(query),
@@ -283,10 +280,9 @@ class Search extends React.Component<Props> {
           </div>
         )}
         <ResultsWrapper pinToTop={this.pinToTop} column auto>
-          <SearchField
+          <SearchInput
             placeholder={`${t("Search")}…`}
             onKeyDown={this.handleKeyDown}
-            onChange={this.updateLocation}
             defaultValue={this.query}
           />
           {showShortcutTip && (

app/scenes/Search/components/SearchField.js

@@ -1,97 +0,0 @@
-// @flow
-import { SearchIcon } from "outline-icons";
-import * as React from "react";
-import styled, { withTheme } from "styled-components";
-import Flex from "components/Flex";
-import { type Theme } from "types";
-
-type Props = {
-  onChange: (string) => void,
-  defaultValue?: string,
-  placeholder?: string,
-  theme: Theme,
-};
-
-class SearchField extends React.Component<Props> {
-  input: ?HTMLInputElement;
-
-  componentDidMount() {
-    if (this.props && this.input) {
-      // ensure that focus is placed at end of input
-      const len = (this.props.defaultValue || "").length;
-      this.input.setSelectionRange(len, len);
-    }
-  }
-
-  handleChange = (ev: SyntheticEvent<HTMLInputElement>) => {
-    this.props.onChange(ev.currentTarget.value ? ev.currentTarget.value : "");
-  };
-
-  focusInput = (ev: SyntheticEvent<>) => {
-    if (this.input) this.input.focus();
-  };
-
-  render() {
-    return (
-      <Field align="center">
-        <StyledIcon
-          type="Search"
-          size={46}
-          color={this.props.theme.textTertiary}
-          onClick={this.focusInput}
-        />
-        <StyledInput
-          {...this.props}
-          ref={(ref) => (this.input = ref)}
-          onChange={this.handleChange}
-          spellCheck="false"
-          placeholder={this.props.placeholder}
-          type="search"
-          autoFocus
-        />
-      </Field>
-    );
-  }
-}
-
-const Field = styled(Flex)`
-  position: relative;
-  margin-bottom: 8px;
-`;
-
-const StyledInput = styled.input`
-  width: 100%;
-  padding: 10px 10px 10px 60px;
-  font-size: 36px;
-  font-weight: 400;
-  outline: none;
-  border: 0;
-  background: ${(props) => props.theme.sidebarBackground};
-  transition: ${(props) => props.theme.backgroundTransition};
-  border-radius: 4px;
-
-  color: ${(props) => props.theme.text};
-
-  ::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-  }
-  ::-webkit-input-placeholder {
-    color: ${(props) => props.theme.placeholder};
-  }
-  :-moz-placeholder {
-    color: ${(props) => props.theme.placeholder};
-  }
-  ::-moz-placeholder {
-    color: ${(props) => props.theme.placeholder};
-  }
-  :-ms-input-placeholder {
-    color: ${(props) => props.theme.placeholder};
-  }
-`;
-
-const StyledIcon = styled(SearchIcon)`
-  position: absolute;
-  left: 8px;
-`;
-
-export default withTheme(SearchField);

app/scenes/Search/components/SearchInput.js

@@ -0,0 +1,86 @@
+// @flow
+import { SearchIcon } from "outline-icons";
+import * as React from "react";
+import styled, { useTheme } from "styled-components";
+import Flex from "components/Flex";
+
+type Props = {
+  defaultValue?: string,
+  placeholder?: string,
+};
+
+function SearchInput({ defaultValue, ...rest }: Props) {
+  const theme = useTheme();
+  const inputRef = React.useRef();
+
+  React.useEffect(() => {
+    // ensure that focus is placed at end of input
+    const len = (defaultValue || "").length;
+    inputRef.current?.setSelectionRange(len, len);
+  }, [defaultValue]);
+
+  const focusInput = React.useCallback((ev: SyntheticEvent<>) => {
+    inputRef.current?.focus();
+  }, []);
+
+  return (
+    <Wrapper align="center">
+      <StyledIcon
+        type="Search"
+        size={46}
+        color={theme.textTertiary}
+        onClick={focusInput}
+      />
+      <StyledInput
+        {...rest}
+        defaultValue={defaultValue}
+        ref={inputRef}
+        spellCheck="false"
+        type="search"
+        autoFocus
+      />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled(Flex)`
+  position: relative;
+  margin-bottom: 8px;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  padding: 10px 10px 10px 60px;
+  font-size: 36px;
+  font-weight: 400;
+  outline: none;
+  border: 0;
+  background: ${(props) => props.theme.sidebarBackground};
+  transition: ${(props) => props.theme.backgroundTransition};
+  border-radius: 4px;
+
+  color: ${(props) => props.theme.text};
+
+  ::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+  ::-webkit-input-placeholder {
+    color: ${(props) => props.theme.placeholder};
+  }
+  :-moz-placeholder {
+    color: ${(props) => props.theme.placeholder};
+  }
+  ::-moz-placeholder {
+    color: ${(props) => props.theme.placeholder};
+  }
+  :-ms-input-placeholder {
+    color: ${(props) => props.theme.placeholder};
+  }
+`;
+
+const StyledIcon = styled(SearchIcon)`
+  position: absolute;
+  left: 8px;
+`;
+
+export default SearchInput;