diff --git a/web/apps/photos/src/components/SearchBar.tsx b/web/apps/photos/src/components/SearchBar.tsx index 37149b00a2..32e727668d 100644 --- a/web/apps/photos/src/components/SearchBar.tsx +++ b/web/apps/photos/src/components/SearchBar.tsx @@ -159,6 +159,7 @@ const SearchInput: React.FC = ({ const theme = useTheme(); const styles = useMemo(() => useSelectStyles(theme), [theme]); + const components = useMemo(() => ({ Option, Control, Input }), []); useEffect(() => { search(value); @@ -176,9 +177,7 @@ const SearchInput: React.FC = ({ }; const handleInputChange = (value: string, actionMeta: InputActionMeta) => { - if (actionMeta.action === "input-change") { - setInputValue(value); - } + if (actionMeta.action == "input-change") setInputValue(value); }; const resetSearch = () => { @@ -187,8 +186,8 @@ const SearchInput: React.FC = ({ setInputValue(""); }; - const getOptions = useCallback( - pDebounce(getAutoCompleteSuggestions(), 250), + const loadOptions = useCallback( + pDebounce(getAutoCompleteSuggestions, 250), [], ); @@ -245,8 +244,6 @@ const SearchInput: React.FC = ({ setValue(value); }; - const components = useMemo(() => ({ Option, Control, Input }), []); - return ( = ({ value={value} components={components} styles={styles} - placeholder={t("search_hint")} - loadOptions={getOptions} + loadOptions={loadOptions} onChange={handleChange} - isMulti={false} - isClearable - escapeClearsValue inputValue={inputValue} onInputChange={handleInputChange} + isClearable + escapeClearsValue + placeholder={t("search_hint")} noOptionsMessage={({ inputValue }) => shouldShowEmptyState(inputValue) ? ( diff --git a/web/packages/new/photos/services/search/index.ts b/web/packages/new/photos/services/search/index.ts index af0dca4a23..29115122cd 100644 --- a/web/packages/new/photos/services/search/index.ts +++ b/web/packages/new/photos/services/search/index.ts @@ -163,19 +163,19 @@ const labelledFileTypes = (): LabelledFileType[] => [ // TODO-Cluster -- AUDIT BELOW THIS // Suggestions shown in the search dropdown when the user has typed something. -export const getAutoCompleteSuggestions = - () => - async (searchPhrase: string): Promise => { - log.debug(() => ["getAutoCompleteSuggestions"]); - try { - const suggestions: Suggestion[] = - await suggestionsForString(searchPhrase); - return convertSuggestionsToOptions(suggestions); - } catch (e) { - log.error("getAutoCompleteSuggestions failed", e); - return []; - } - }; +export const getAutoCompleteSuggestions = async ( + searchPhrase: string, +): Promise => { + log.debug(() => ["getAutoCompleteSuggestions"]); + try { + const suggestions: Suggestion[] = + await suggestionsForString(searchPhrase); + return convertSuggestionsToOptions(suggestions); + } catch (e) { + log.error("getAutoCompleteSuggestions failed", e); + return []; + } +}; async function convertSuggestionsToOptions( suggestions: Suggestion[],