forked from
l4.pm/atvouch
dev vouch dev on at. thats about it
frontend: clear typeahead on enter
+29
-3
+29
-3
frontend/src/HandleInput.tsx
+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(() => {