fix: prevent toolbar search flicker on outside page click

This commit is contained in:
2026-02-28 08:14:12 +01:00
parent 8b00084f09
commit 80100c7651

View File

@@ -53,6 +53,7 @@ export default function SearchBar({ placeholder = 'Search artworks, artists, tag
} }
function collapse() { function collapse() {
if (phase === 'idle' || phase === 'closing') return
clearTimeout(openTimerRef.current) clearTimeout(openTimerRef.current)
setPhase('closing') setPhase('closing')
setOpen(false) setOpen(false)
@@ -78,11 +79,12 @@ export default function SearchBar({ placeholder = 'Search artworks, artists, tag
// ── outside click ──────────────────────────────────────────────────────── // ── outside click ────────────────────────────────────────────────────────
useEffect(() => { useEffect(() => {
function onMouse(e) { function onMouse(e) {
if (!isExpanded) return
if (wrapperRef.current && !wrapperRef.current.contains(e.target)) collapse() if (wrapperRef.current && !wrapperRef.current.contains(e.target)) collapse()
} }
document.addEventListener('mousedown', onMouse) document.addEventListener('mousedown', onMouse)
return () => document.removeEventListener('mousedown', onMouse) return () => document.removeEventListener('mousedown', onMouse)
}, []) }, [isExpanded, phase])
// ── fetch (parallel artworks + tags) ──────────────────────────────────── // ── fetch (parallel artworks + tags) ────────────────────────────────────
const fetchSuggestions = useCallback(async (q) => { const fetchSuggestions = useCallback(async (q) => {