dev vouch dev on at. thats about it
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

frontend: clear typeahead on enter

Luna 0e57b705 f33eaeeb

+29 -3
+29 -3
frontend/src/HandleInput.tsx
··· 16 16 const [showDropdown, setShowDropdown] = useState(false); 17 17 const [activeIndex, setActiveIndex] = useState(-1); 18 18 const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null); 19 + const suppressRef = useRef(false); 19 20 const containerRef = useRef<HTMLDivElement>(null); 20 21 22 + const cancelPending = () => { 23 + if (timerRef.current) clearTimeout(timerRef.current); 24 + timerRef.current = null; 25 + suppressRef.current = true; 26 + }; 27 + 21 28 const doSearch = useCallback(async (q: string) => { 22 29 const results = await searchActorsTypeahead(q); 30 + if (suppressRef.current) return; 23 31 setSuggestions(results); 24 32 setShowDropdown(results.length > 0); 25 33 setActiveIndex(-1); ··· 28 36 const handleChange = (val: string) => { 29 37 onChange(val); 30 38 if (timerRef.current) clearTimeout(timerRef.current); 39 + suppressRef.current = false; 31 40 if (val.trim().length < 2 || val.includes("@")) { 32 41 setSuggestions([]); 33 42 setShowDropdown(false); ··· 43 52 }; 44 53 45 54 const handleKeyDown = (e: React.KeyboardEvent) => { 55 + if (e.key === "Enter") { 56 + cancelPending(); 57 + if (showDropdown && activeIndex >= 0) { 58 + e.preventDefault(); 59 + selectActor(suggestions[activeIndex]); 60 + } else { 61 + // Submitting the form — close the dropdown 62 + setShowDropdown(false); 63 + setSuggestions([]); 64 + } 65 + return; 66 + } 46 67 if (!showDropdown || suggestions.length === 0) return; 47 68 if (e.key === "ArrowDown") { 48 69 e.preventDefault(); ··· 50 71 } else if (e.key === "ArrowUp") { 51 72 e.preventDefault(); 52 73 setActiveIndex((i) => Math.max(i - 1, 0)); 53 - } else if (e.key === "Enter" && activeIndex >= 0) { 54 - e.preventDefault(); 55 - selectActor(suggestions[activeIndex]); 56 74 } else if (e.key === "Escape") { 57 75 setShowDropdown(false); 58 76 } 59 77 }; 78 + 79 + // Clear typeahead when value is cleared externally (e.g. form submit) 80 + useEffect(() => { 81 + if (!value) { 82 + setSuggestions([]); 83 + setShowDropdown(false); 84 + } 85 + }, [value]); 60 86 61 87 // Close dropdown on outside click 62 88 useEffect(() => {