From 8a5b336d3b037030d4c6493fa3c7c29d8f2b8fb9 Mon Sep 17 00:00:00 2001
From: Cody Seibert <webdevcody@gmail.com>
Date: Tue, 9 Dec 2025 01:44:02 -0500
Subject: [PATCH] Fix typeahead dropdown not closing when clicking a suggestion
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/src/components/ui/category-autocomplete.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/src/components/ui/category-autocomplete.tsx b/app/src/components/ui/category-autocomplete.tsx
index a5c248c0..0f3a1c67 100644
--- a/app/src/components/ui/category-autocomplete.tsx
+++ b/app/src/components/ui/category-autocomplete.tsx
@@ -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, "-")}`}
             >