diff --git a/src/components/SearchBar/index.tsx b/src/components/SearchBar/index.tsx index 8999462..461c1a6 100644 --- a/src/components/SearchBar/index.tsx +++ b/src/components/SearchBar/index.tsx @@ -13,6 +13,7 @@ import { nip19 } from 'nostr-tools' import { forwardRef, HTMLAttributes, + useCallback, useEffect, useImperativeHandle, useMemo, @@ -36,6 +37,7 @@ const SearchBar = forwardRef< const [debouncedInput, setDebouncedInput] = useState(input) const { profiles, isFetching: isFetchingProfiles } = useSearchProfiles(debouncedInput, 5) const [searching, setSearching] = useState(false) + const [displayList, setDisplayList] = useState(false) const searchInputRef = useRef(null) const normalizedUrl = useMemo(() => { if (['w', 'ws', 'ws:', 'ws:/', 'wss', 'wss:', 'wss:/'].includes(input)) { @@ -166,18 +168,33 @@ const SearchBar = forwardRef< }, [input, debouncedInput, profiles]) useEffect(() => { - if (searching) { + if (list) { modalManager.register(id, () => { - blur() + setDisplayList(false) }) } else { modalManager.unregister(id) } - }, [searching]) + }, [list]) + + useEffect(() => { + setDisplayList(searching && !!input) + }, [searching, input]) + + const handleKeyDown = useCallback( + (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + e.stopPropagation() + onSearch({ type: 'notes', search: input.trim() }) + blur() + } + }, + [input, onSearch] + ) return (
- {searching && ( + {displayList && list && ( <>
e.preventDefault()} > - {list ? ( -
{list}
- ) : ( -
- {t('Type searching for people, keywords, or relays')} -
- )} +
{list}
blur()} /> @@ -205,8 +216,10 @@ const SearchBar = forwardRef< 'bg-surface-background shadow-inner h-full border-none', searching ? 'z-50' : '' )} + placeholder={t('Type searching for people, keywords, or relays')} value={input} onChange={(e) => setInput(e.target.value)} + onKeyDown={handleKeyDown} onFocus={() => setSearching(true)} onBlur={() => setSearching(false)} />