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
>(