Don't reset the search input field on focus (#1577)

apps/photos/src/components/Search/SearchBar/searchInput/index.tsx

@@ -1,13 +1,7 @@
 import { IconButton } from '@mui/material';
 import pDebounce from 'p-debounce';
 import { AppContext } from 'pages/_app';
-import React, {
-    useCallback,
-    useContext,
-    useEffect,
-    useRef,
-    useState,
-} from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import {
     getAutoCompleteSuggestions,
     getDefaultOptions,
@@ -34,6 +28,8 @@ import { t } from 'i18next';
 import memoize from 'memoize-one';
 import { LocationTagData } from 'types/entity';
 import { FILE_TYPE } from 'constants/file';
+import { InputActionMeta } from 'react-select/src/types';
+import { components } from 'react-select';
 
 interface Iprops {
     isOpen: boolean;
@@ -43,20 +39,33 @@ interface Iprops {
     collections: Collection[];
 }
 
-const createComponents = memoize((Option, ValueContainer, Menu) => ({
+const createComponents = memoize((Option, ValueContainer, Menu, Input) => ({
     Option,
     ValueContainer,
     Menu,
+    Input,
 }));
 
+const VisibleInput = (props) => (
+    <components.Input {...props} isHidden={false} />
+);
+
 export default function SearchInput(props: Iprops) {
     const selectRef = useRef(null);
     const [value, setValue] = useState<SearchOption>(null);
     const appContext = useContext(AppContext);
     const handleChange = (value: SearchOption) => {
         setValue(value);
+        setQuery(value.label);
+        blur();
+    };
+    const handleInputChange = (value: string, actionMeta: InputActionMeta) => {
+        if (actionMeta.action === 'input-change') {
+            setQuery(value);
+        }
     };
     const [defaultOptions, setDefaultOptions] = useState([]);
+    const [query, setQuery] = useState('');
 
     useEffect(() => {
         search(value);
@@ -82,6 +91,7 @@ export default function SearchInput(props: Iprops) {
             }, 10);
             props.setIsOpen(false);
             setValue(null);
+            setQuery('');
         }
     };
 
@@ -90,6 +100,10 @@ export default function SearchInput(props: Iprops) {
         250
     );
 
+    const blur = () => {
+        selectRef.current?.blur();
+    };
+
     const search = (selectedOption: SearchOption) => {
         if (!selectedOption) {
             return;
@@ -111,6 +125,7 @@ export default function SearchInput(props: Iprops) {
             case SuggestionType.COLLECTION:
                 search = { collection: selectedOption.value as number };
                 setValue(null);
+                setQuery('');
                 break;
             case SuggestionType.FILE_NAME:
                 search = { files: selectedOption.value as number[] };
@@ -161,7 +176,8 @@ export default function SearchInput(props: Iprops) {
     const components = createComponents(
         OptionWithInfo,
         ValueContainerWithIcon,
-        MemoizedMenuWithPeople
+        MemoizedMenuWithPeople,
+        VisibleInput
     );
 
     return (
@@ -175,6 +191,8 @@ export default function SearchInput(props: Iprops) {
                 onChange={handleChange}
                 onFocus={handleOnFocus}
                 isClearable
+                inputValue={query}
+                onInputChange={handleInputChange}
                 escapeClearsValue
                 styles={SelectStyles}
                 defaultOptions={

apps/photos/src/styles/search.ts

@@ -49,11 +49,10 @@ export const SelectStyles = {
         ...style,
         display: 'none',
     }),
-    singleValue: (style, state) => ({
+    singleValue: (style) => ({
         ...style,
         backgroundColor: 'transparent',
         color: '#d1d1d1',
-        display: state.selectProps.menuIsOpen ? 'none' : 'block',
         marginLeft: '36px',
     }),
     placeholder: (style) => ({