diff --git a/src/components/SearchBar/index.tsx b/src/components/SearchBar/index.tsx index b31aa8b6..eb33373d 100644 --- a/src/components/SearchBar/index.tsx +++ b/src/components/SearchBar/index.tsx @@ -12,7 +12,7 @@ import { useSecondaryPage } from '@/PageManager' import { useScreenSize } from '@/providers/ScreenSizeProvider' import modalManager from '@/services/modal-manager.service' import { TProfile, TSearchParams } from '@/types' -import { Hash, Notebook, Server, UserRound } from 'lucide-react' +import { Hash, Notebook, Search, Server, UserRound } from 'lucide-react' import { nip19 } from 'nostr-tools' import { forwardRef, @@ -82,10 +82,6 @@ const SearchBar = forwardRef< searchInputRef.current?.blur() } - const startSearch = () => { - setSearching(true) - } - const list = useMemo(() => { const search = input.trim() if (!search) return null @@ -167,21 +163,19 @@ const SearchBar = forwardRef< ) }, [input, debouncedInput, profiles]) - const showList = useMemo(() => searching && !!list, [searching, list]) - useEffect(() => { - if (showList) { + if (searching) { modalManager.register(id, () => { blur() }) } else { modalManager.unregister(id) } - }, [showList]) + }, [searching]) return (
- {showList && ( + {searching && ( <>
e.preventDefault()} > - {list} + {list ? ( + {list} + ) : ( +
+ {t('Type searching for people, keywords, or relays')} +
+ )}
blur()} /> @@ -206,7 +206,8 @@ const SearchBar = forwardRef< )} value={input} onChange={(e) => setInput(e.target.value)} - onFocus={() => startSearch()} + onFocus={() => setSearching(true)} + onBlur={() => setSearching(false)} />
) @@ -222,7 +223,7 @@ export type TSearchBarRef = { function NormalItem({ search, onClick }: { search: string; onClick?: () => void }) { return ( - +
{search}
) diff --git a/src/components/SearchInput/index.tsx b/src/components/SearchInput/index.tsx index 0255c5e7..78752241 100644 --- a/src/components/SearchInput/index.tsx +++ b/src/components/SearchInput/index.tsx @@ -41,6 +41,7 @@ const SearchInput = forwardRef>(