Fix typeahead dropdown not closing when clicking a suggestion

Changed the click handler on category autocomplete options from onClick to
onMouseDown with preventDefault(). This fixes a race condition where the
mousedown event (used by the outside click handler) was firing before
the click event, causing the dropdown to close before the selection was
processed.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Cody Seibert
2025-12-09 01:44:02 -05:00
parent 0be9d751fe
commit 8a5b336d3b

View File

@@ -178,7 +178,7 @@ export function CategoryAutocomplete({
{isOpen && filteredSuggestions.length > 0 && (
<ul
ref={listRef}
className="absolute z-50 mt-1 w-full max-h-60 overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95"
className="absolute z-50 mt-1 w-full max-h-60 overflow-auto rounded-md border bg-background p-1 shadow-md animate-in fade-in-0 zoom-in-95"
role="listbox"
data-testid="category-autocomplete-list"
>
@@ -192,7 +192,10 @@ export function CategoryAutocomplete({
highlightedIndex === index && "bg-accent text-accent-foreground",
inputValue === suggestion && "font-medium"
)}
onClick={() => handleSelect(suggestion)}
onMouseDown={(e) => {
e.preventDefault();
handleSelect(suggestion);
}}
onMouseEnter={() => setHighlightedIndex(index)}
data-testid={`category-option-${suggestion.toLowerCase().replace(/\s+/g, "-")}`}
>