From 35896c12c50e1e0c0a6522524fb8ad8da5725533 Mon Sep 17 00:00:00 2001 From: Robin Huang Date: Wed, 4 Sep 2024 17:06:46 -0700 Subject: [PATCH] Fix unfocus issue. --- components/Search/Autocomplete.tsx | 122 +++++++++-------------------- components/registry/Registry.tsx | 3 - package.json | 9 ++- pnpm-lock.yaml | 11 ++- 4 files changed, 50 insertions(+), 95 deletions(-) diff --git a/components/Search/Autocomplete.tsx b/components/Search/Autocomplete.tsx index b1d844a..4e101dc 100644 --- a/components/Search/Autocomplete.tsx +++ b/components/Search/Autocomplete.tsx @@ -1,4 +1,3 @@ -import '@algolia/autocomplete-theme-classic' import type { SearchClient } from 'algoliasearch/lite' import type { BaseItem } from '@algolia/autocomplete-core' import type { AutocompleteOptions } from '@algolia/autocomplete-js' @@ -13,7 +12,7 @@ import { } from 'react' import { createRoot, Root } from 'react-dom/client' -import { useSearchBox } from 'react-instantsearch' +import { usePagination, useSearchBox } from 'react-instantsearch' import { autocomplete } from '@algolia/autocomplete-js' import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches' import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions' @@ -24,6 +23,8 @@ import { INSTANT_SEARCH_QUERY_SUGGESTIONS, } from 'src/constants' +import '@algolia/autocomplete-theme-classic' + type AutocompleteProps = Partial> & { searchClient: SearchClient className?: string @@ -33,7 +34,7 @@ type SetInstantSearchUiStateOptions = { query: string } -export function Autocomplete({ +export default function Autocomplete({ searchClient, className, ...autocompleteProps @@ -41,10 +42,11 @@ export function Autocomplete({ const autocompleteContainer = useRef(null) const panelRootRef = useRef(null) const rootRef = useRef(null) - const inputRef = useRef(null) const { query, refine: setQuery } = useSearchBox() + const { refine: setPage } = usePagination() + const [instantSearchUiState, setInstantSearchUiState] = useState({ query }) const debouncedSetInstantSearchUiState = debounce( @@ -54,14 +56,9 @@ export function Autocomplete({ useEffect(() => { setQuery(instantSearchUiState.query) + setPage(0) }, [instantSearchUiState, setQuery]) - const focusInput = () => { - if (inputRef.current) { - inputRef.current.focus() - } - } - const plugins = useMemo(() => { const recentSearches = createLocalStorageRecentSearchesPlugin({ key: 'instantsearch', @@ -71,7 +68,6 @@ export function Autocomplete({ ...source, onSelect({ item }) { setInstantSearchUiState({ query: item.label }) - focusInput() }, } }, @@ -90,43 +86,31 @@ export function Autocomplete({ ...source, sourceId: 'querySuggestionsPlugin', onSelect({ item }) { - setInstantSearchUiState({ query: item.name }) - - if (inputRef.current) { - inputRef.current.value = item.name + setInstantSearchUiState({ + query: item.query, + }) + }, + getItems(params) { + if (!params.state.query) { + return [] } - searchClient - .search([ - { - indexName: INSTANT_SEARCH_INDEX_NAME, - query: item.name, - params: { hitsPerPage: 10 }, - }, - ]) - .then(() => { - recentSearches.data!.addItem({ - id: item.name, - label: item.name, - }) - focusInput() - }) - .catch((err) => { - console.error('Search failed:', err) - }) - - debouncedSetInstantSearchUiState({ query: item.name }) + return source.getItems(params) }, templates: { - item({ item }) { + ...source.templates, + header({ items }) { + if (items.length === 0) { + return + } + return ( -
-
-
- {item.name} -
-
-
+ + + In other categories + + + ) }, }, @@ -135,47 +119,33 @@ export function Autocomplete({ }) return [recentSearches, querySuggestions] - }, [searchClient, debouncedSetInstantSearchUiState]) + }, []) useEffect(() => { if (!autocompleteContainer.current) { return } + const autocompleteInstance = autocomplete({ ...autocompleteProps, container: autocompleteContainer.current, initialState: { query }, insights: true, plugins, + onReset() { + setInstantSearchUiState({ + query: '', + }) + }, onSubmit({ state }) { setInstantSearchUiState({ query: state.query }) - console.log('On Submit') - searchClient - .search([ - { - indexName: INSTANT_SEARCH_INDEX_NAME, - query: state.query, - params: { hitsPerPage: 10 }, - }, - ]) - .then(() => { - focusInput() - }) - .catch((err) => { - console.error('Search failed:', err) - }) }, onStateChange({ prevState, state }) { if (prevState.query !== state.query) { - console.log('State changed') debouncedSetInstantSearchUiState({ query: state.query }) } }, - renderer: { - createElement, - Fragment, - render: () => {}, - }, + renderer: { createElement, Fragment, render: () => {} }, render({ children }, root) { if (!panelRootRef.current || rootRef.current !== root) { rootRef.current = root @@ -187,24 +157,8 @@ export function Autocomplete({ }, }) - // Store a reference to the input element - inputRef.current = - autocompleteContainer.current.querySelector('.aa-Input') - return () => autocompleteInstance.destroy() - }, [ - plugins, - searchClient, - autocompleteProps, - query, - debouncedSetInstantSearchUiState, - ]) - - return ( -
-
-
- ) -} + }, [plugins]) -export default Autocomplete + return
+} diff --git a/components/registry/Registry.tsx b/components/registry/Registry.tsx index b17d262..0b5de16 100644 --- a/components/registry/Registry.tsx +++ b/components/registry/Registry.tsx @@ -25,7 +25,6 @@ type RegistryProps = { const Registry: React.FC = ({}) => { return (
- {/* Header section */} = ({}) => { buttonLink="/nodes" /> - {/* InstantSearch component for Algolia search */}
= ({}) => { preserveSharedStateOnUnmount: true, }} > - {/* Autocomplete search bar */}