seperate default options

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

@@ -2,7 +2,10 @@ import { IconButton } from '@mui/material';
 import debounce from 'debounce-promise';
 import { AppContext } from 'pages/_app';
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import { getAutoCompleteSuggestions } from 'services/searchService';
+import {
+    getAutoCompleteSuggestions,
+    getDefaultOptions,
+} from 'services/searchService';
 import {
     Bbox,
     DateValue,
@@ -38,9 +41,18 @@ export default function SearchInput(props: Iprops) {
     const handleChange = (value: SearchOption) => {
         setValue(value);
     };
+    const [defaultOptions, setDefaultOptions] = useState([]);
 
     useEffect(() => search(value), [value]);
 
+    useEffect(() => {
+        const main = async () => {
+            const defaultOptions = await getDefaultOptions();
+            setDefaultOptions(defaultOptions);
+        };
+        main();
+    }, []);
+
     const resetSearch = () => {
         if (props.isOpen) {
             appContext.startLoading();
@@ -96,6 +108,7 @@ export default function SearchInput(props: Iprops) {
     // unwanted side effect: placeholder is not shown on focus/click
     // https://github.com/JedWatson/react-select/issues/1879
     // for correct fix AsyncSelect can be extended to support default options reloading on focus/click
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const handleOnFocus = () => {
         const emptySearch = ' ';
         selectRef.current.state.inputValue = emptySearch;
@@ -122,10 +135,11 @@ export default function SearchInput(props: Iprops) {
                 placeholder={constants.SEARCH_HINT()}
                 loadOptions={getOptions}
                 onChange={handleChange}
-                onFocus={handleOnFocus}
+                // onFocus={handleOnFocus}
                 isClearable
                 escapeClearsValue
                 styles={SelectStyles}
+                defaultOptions={defaultOptions}
                 noOptionsMessage={() => null}
             />
 

src/services/searchService.ts

@@ -28,26 +28,28 @@ const ENDPOINT = getEndpoint();
 
 const DIGITS = new Set(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']);
 
+export const getDefaultOptions = async () => {
+    return [
+        await getIndexStatusSuggestion(),
+        ...(await getAllPeopleSuggestion()),
+    ];
+};
+
 export const getAutoCompleteSuggestions =
     (files: EnteFile[], collections: Collection[]) =>
     async (searchPhrase: string) => {
         searchPhrase = searchPhrase.trim().toLowerCase();
-        const suggestions = [];
-        suggestions.push(await getIndexStatusSuggestion());
-        suggestions.push(...(await getAllPeopleSuggestion()));
         if (!searchPhrase?.length) {
-            return suggestions;
+            return [];
         }
-        suggestions.push(
-            ...[
+        const suggestions = [
             ...getHolidaySuggestion(searchPhrase),
             ...getYearSuggestion(searchPhrase),
             ...getDateSuggestion(searchPhrase),
             ...getCollectionSuggestion(searchPhrase, collections),
             ...getFileSuggestion(searchPhrase, files),
             ...(await getLocationSuggestions(searchPhrase)),
-            ]
-        );
+        ];
 
         const previewImageAppendedOptions: SearchOption[] = suggestions
             .map((suggestion) => ({
@@ -63,8 +65,8 @@ export const getAutoCompleteSuggestions =
                     fileCount: resultFiles.length,
                     previewFiles: resultFiles.slice(0, 3),
                 };
-            });
-        // .filter((option) => option.fileCount);
+            })
+            .filter((option) => option.fileCount);
 
         return previewImageAppendedOptions;
     };