UX updates to AdminUI search (#2198)

* Remove debounce from useListSearch

* Fix debounce

* Changeset

.changeset/chatty-walls-give.md

@@ -0,0 +1,5 @@
+---
+'@keystonejs/app-admin-ui': patch
+---
+
+Small UX updates to item/list search input

packages/app-admin-ui/client/pages/List/Search.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 
 import { jsx } from '@emotion/core';
-import { useRef, forwardRef, useState } from 'react';
+import { useRef, forwardRef, useState, useCallback, useEffect } from 'react';
 import debounce from 'lodash.debounce';
 
 import { SearchIcon, XIcon } from '@arch-ui/icons';
@@ -11,31 +11,35 @@ import { LoadingSpinner } from '@arch-ui/loading';
 import { colors } from '@arch-ui/theme';
 import { uniformHeight } from '@arch-ui/common';
 
-import { useListSearch } from './dataHooks';
+import { useListSearch, useRouter } from './dataHooks';
 import { elementOffsetStyles } from './Filters/ActiveFilters';
 
 export default function Search({ isLoading, list }) {
   const { searchValue, onChange, onClear, onSubmit } = useListSearch(list.key);
   const [value, setValue] = useState(searchValue);
   const inputRef = useRef();
-  const debouncedOnChange = debounce(onChange, 200);
+  const { history } = useRouter();
 
   const hasValue = searchValue && searchValue.length;
   const Icon = hasValue ? XIcon : SearchIcon;
   const isFetching = hasValue && isLoading;
 
-  const handleChange = event => {
-    setValue(event.target.value);
-    debouncedOnChange(event.target.value);
+  const onChangeDebounced = useCallback(debounce(onChange, 400), []);
+
+  const handleChange = ({ target: { value } }) => {
+    setValue(value);
+    onChangeDebounced(value);
   };
+
   const handleClear = () => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
     setValue('');
     onClear();
   };
 
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.focus();
+  }, [history.location.search]);
+
   const id = 'ks-list-search-input';
 
   // NOTE: `autoComplete="off"` doesn't behave as expected on `<input />` in
@@ -60,6 +64,7 @@ export default function Search({ isLoading, list }) {
         value={value}
         type="text"
         ref={inputRef}
+        disabled={isFetching}
       />
       <div
         css={{
@@ -74,17 +79,13 @@ export default function Search({ isLoading, list }) {
           right: 0,
           top: 0,
           width: 40,
-
           ':hover': {
             color: hasValue ? colors.text : colors.N30,
           },
         }}
+        onClick={hasValue && !isFetching ? handleClear : null}
       >
-        {isFetching ? (
-          <LoadingSpinner size={16} />
-        ) : (
-          <Icon onClick={hasValue ? handleClear : null} />
-        )}
+        {isFetching ? <LoadingSpinner size={16} /> : <Icon />}
       </div>
     </form>
   );

packages/app-admin-ui/client/pages/List/dataHooks.js

@@ -1,6 +1,5 @@
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState, useCallback } from 'react';
 import { __RouterContext } from 'react-router-dom';
-import debounce from 'lodash.debounce';
 import { useQuery } from '@apollo/react-hooks';
 
 import { deconstructErrorsToDataShape } from '../../util';
@@ -210,14 +209,19 @@ export function useListSearch(listKey) {
   const routeProps = useRouter();
   const { history, match } = routeProps;
 
-  const onChange = debounce(newSearch => {
-    const addHistoryRecord = !searchValue;
-    setSearch({ search: newSearch }, addHistoryRecord);
-  }, 300);
-  const onClear = () => {
+  const onChange = useCallback(
+    newSearch => {
+      const addHistoryRecord = !searchValue;
+      setSearch({ search: newSearch }, addHistoryRecord);
+    },
+    [searchValue]
+  );
+
+  const onClear = useCallback(() => {
     const addHistoryRecord = !!searchValue;
     setSearch({ search: '' }, addHistoryRecord);
-  };
+  }, [searchValue]);
+
   const onSubmit = event => {
     if (event) {
       event.preventDefault();