diff --git a/src/components/PropertyInput.tsx b/src/components/PropertyInput.tsx index b837efe..3e00969 100644 --- a/src/components/PropertyInput.tsx +++ b/src/components/PropertyInput.tsx @@ -165,18 +165,31 @@ export function PropertyInput({ // Handle blur const handleBlur = useCallback((e: React.FocusEvent) => { - // Delay hiding suggestions to allow for clicks on suggestions + // Delay and more robust checking setTimeout(() => { - const relatedTarget = e.relatedTarget as HTMLElement; - if (!suggestionsRef.current?.contains(relatedTarget)) { + // Check if the active element is within our suggestions dropdown + const activeElement = document.activeElement; + const isClickingOnSuggestion = suggestionsRef.current?.contains(activeElement) || + suggestionsRef.current?.contains(e.relatedTarget as HTMLElement); + + if (!isClickingOnSuggestion) { setShowSuggestions(false); setSelectedIndex(-1); } - }, 150); + }, 200); }, []); // Handle suggestion click - const handleSuggestionClick = useCallback((property: PropertySuggestion) => { + const handleSuggestionClick = useCallback((property: PropertySuggestion, event: React.MouseEvent) => { + // Prevent the blur event from interfering + event.preventDefault(); + event.stopPropagation(); + + // Immediately hide suggestions and process selection + setShowSuggestions(false); + setSelectedIndex(-1); + + // Process the selection handlePropertySelect(property); }, [handlePropertySelect]); @@ -246,7 +259,7 @@ export function PropertyInput({ : 'hover:bg-gray-50 border-l-4 border-transparent' } `} - onClick={() => handleSuggestionClick(suggestion)} + onClick={(event) => handleSuggestionClick(suggestion, event)} onMouseEnter={() => setSelectedIndex(index)} >