Enhance app search

Author: k.golikov

src/layouts/appLayout/components/appHeader/components/appHeaderSearch/AppHeaderSearch.module.scss

@@ -1,5 +1,16 @@
 .container {
+    position: relative;
+}
+
+.autoComplete {
     margin-left: 80px;
     width: 230px;
     max-width: 230px;
 }
+
+.keyHint {
+    position: absolute;
+    right: 40px;
+    top: -2px;
+    pointer-events: none;
+}

src/layouts/appLayout/components/appHeader/components/appHeaderSearch/AppHeaderSearch.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useCallback, useRef, useState } from 'react';
 import Search from 'antd/lib/input/Search';
 import styles from './AppHeaderSearch.module.scss';
-import { AutoComplete } from 'antd';
+import { AutoComplete, InputRef } from 'antd';
 import Text from 'antd/lib/typography/Text';
 import { DefaultOptionType, FilterFunc, SelectHandler } from 'rc-select/lib/Select';
 import { BaseSelectRef } from 'rc-select/lib/BaseSelect';
@@ -10,6 +10,8 @@ import { MenuRouteItem } from '../../../../utils/routeMenuItems';
 import { useNavigate } from 'react-router-dom';
 import { AutoCompleteProps } from 'antd/lib/auto-complete';
 import classNames from 'classnames';
+import { useKey } from 'rooks';
+import { isEmpty } from 'lodash';
 
 interface OptionType extends DefaultOptionType {
     data: MenuRouteItem;
@@ -28,12 +30,14 @@ const allSearchOptions: OptionType[] = menuRouteItems.map((item) => {
 const filterOption: FilterFunc<OptionType> = (inputValue, option) => {
     const query = inputValue.trim().toLocaleLowerCase();
 
+    const isEmptyQuery = isEmpty(query);
+
     if (option === undefined) {
-        return !query;
+        return isEmptyQuery;
     }
 
-    if (!query) {
-        return false;
+    if (isEmptyQuery) {
+        return true;
     }
 
     return String(option.label).toLocaleLowerCase().includes(query);
@@ -46,36 +50,85 @@ interface Props extends Omit<AutoCompleteProps, 'options' | 'filterOption' | 'on
 const AppHeaderSearch: FunctionComponent<Props> = ({ className, inputClassName, ...props }) => {
     const navigate = useNavigate();
 
+    const searchInputRef = useRef<InputRef>(null);
+
     const [query, setQuery] = useState<string>('');
 
     const autoCompleteRef = useRef<BaseSelectRef>(null);
 
+    const selectOption = useCallback((option: MenuRouteItem) => {
+        const path = option.route.path;
+
+        navigate(path);
+
+        setTimeout(() => {
+            setQuery(' ');
+        });
+        setTimeout(() => {
+            setQuery('');
+        });
+        autoCompleteRef.current?.blur();
+    }, []);
+
     const handleSelect = useCallback<SelectHandler<string, OptionType>>(
         (label: string, { data }: OptionType) => {
-            const path = data.route.path;
+            selectOption(data);
+        },
+        [navigate, selectOption]
+    );
 
-            navigate(path);
+    const handleSearch = useCallback(
+        (value: string) => {
+            if (!query.trim().length) {
+                return;
+            }
 
-            setQuery('');
-            autoCompleteRef.current?.blur();
+            const matchingOptions = allSearchOptions.filter((option) => filterOption(value, option));
+            if (!matchingOptions.length) {
+                return;
+            }
+
+            const option = matchingOptions[0];
+            selectOption(option.data);
         },
-        [navigate]
+        [selectOption, query]
     );
 
+    useKey(['/'], (event) => {
+        const activeTag = document.activeElement?.tagName;
+        if (activeTag && ['input', 'textarea'].includes(activeTag)) {
+            return;
+        }
+
+        if (event.altKey || event.ctrlKey || event.shiftKey || event.metaKey) {
+            return;
+        }
+
+        searchInputRef.current?.focus();
+        event.preventDefault();
+    });
+
     return (
-        <AutoComplete
-            options={allSearchOptions}
-            className={classNames(styles.container, className)}
-            filterOption={filterOption}
-            onSelect={handleSelect}
-            notFoundContent={<Text type="secondary">No results</Text>}
-            value={query}
-            onChange={setQuery}
-            ref={autoCompleteRef}
-            {...props}
-        >
-            <Search placeholder="Search" className={inputClassName} />
-        </AutoComplete>
+        <div className={styles.container}>
+            <AutoComplete
+                options={allSearchOptions}
+                className={classNames(styles.autoComplete, className)}
+                filterOption={filterOption}
+                onSelect={handleSelect}
+                notFoundContent={<Text type="secondary">No results</Text>}
+                value={query}
+                onChange={setQuery}
+                ref={autoCompleteRef}
+                {...props}
+            >
+                <Search ref={searchInputRef} onSearch={handleSearch} placeholder="Search" className={inputClassName} />
+            </AutoComplete>
+            {!query.length && (
+                <Text keyboard className={styles.keyHint} type="secondary">
+                    /
+                </Text>
+            )}
+        </div>
     );
 };