diff --git a/src/components/TypeaheadInput.tsx b/src/components/TypeaheadInput.tsx index 35e4a94..9de146f 100644 --- a/src/components/TypeaheadInput.tsx +++ b/src/components/TypeaheadInput.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef, useCallback } from 'react'; +import React, { useState, useEffect, useCallback, useRef } from 'react'; import { WikidataSuggestion } from '@/types/database'; interface TypeaheadInputProps { @@ -27,15 +27,33 @@ export function TypeaheadInput({ const [showSuggestions, setShowSuggestions] = useState(false); const [selectedIndex, setSelectedIndex] = useState(-1); const [isLoading, setIsLoading] = useState(false); + const [isExternalUpdate, setIsExternalUpdate] = useState(false); const inputRef = useRef(null); const suggestionsRef = useRef(null); const timeoutRef = useRef(undefined); - // Update local value when prop changes + // Update local value when prop changes (including external updates) useEffect(() => { - setLocalValue(value); - }, [value]); + if (value !== localValue) { + setLocalValue(value); + setIsExternalUpdate(true); + // Clear suggestions when externally updated + setSuggestions([]); + setShowSuggestions(false); + setSelectedIndex(-1); + } + }, [value, localValue]); + + // Reset external update flag after a short delay + useEffect(() => { + if (isExternalUpdate) { + const timer = setTimeout(() => { + setIsExternalUpdate(false); + }, 100); + return () => clearTimeout(timer); + } + }, [isExternalUpdate]); // Debounced suggestion fetching const debouncedFetchSuggestions = useCallback(async (query: string) => { @@ -73,8 +91,12 @@ export function TypeaheadInput({ const newValue = e.target.value; setLocalValue(newValue); onInput(newValue); - debouncedFetchSuggestions(newValue); - }, [onInput, debouncedFetchSuggestions]); + + // Only fetch suggestions if this is user input, not external update + if (!isExternalUpdate) { + debouncedFetchSuggestions(newValue); + } + }, [onInput, debouncedFetchSuggestions, isExternalUpdate]); // Handle keyboard navigation const handleKeyDown = useCallback((e: React.KeyboardEvent) => { @@ -136,11 +158,13 @@ export function TypeaheadInput({ // Update local value with the selected suggestion const newValue = suggestion.label || ''; setLocalValue(newValue); - onInput(newValue); - // Call the selection handler + // Call the selection handler first (this will update the parent) onSelect(suggestion); + // Then update the input value + onInput(newValue); + // Hide suggestions setShowSuggestions(false); setSelectedIndex(-1);