From e364d8febed1e9416be11ad019dd74e130127512 Mon Sep 17 00:00:00 2001
From: JeffDotPng <zhangjeff2014@gmail.com>
Date: Wed, 17 Apr 2024 11:35:03 -0400
Subject: [PATCH] fix: autocomplete

---
 src/renderer/components/ui/autocomplete.tsx | 22 ++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/ui/autocomplete.tsx b/src/renderer/components/ui/autocomplete.tsx
index b033f1ca5..da55b31c1 100644
--- a/src/renderer/components/ui/autocomplete.tsx
+++ b/src/renderer/components/ui/autocomplete.tsx
@@ -7,7 +7,7 @@ import {
   CommandList,
 } from "./command";
 import { Check } from "lucide-react";
-import { forwardRef, useState } from "react";
+import { forwardRef, useRef, useState } from "react";
 
 type Props = {
   options: string[];
@@ -19,10 +19,11 @@ type Props = {
 export const Autocomplete = forwardRef<HTMLInputElement, Props>(
   ({ options, value, onChange, placeholder }, ref) => {
     const [selected, setSelected] = useState(false);
+    const cmdRef = useRef<HTMLDivElement | null>(null);
 
     return (
       <div className="relative">
-        <Command>
+        <Command ref={cmdRef}>
           <CommandInput
             ref={ref}
             placeholder={placeholder}
@@ -30,15 +31,26 @@ export const Autocomplete = forwardRef<HTMLInputElement, Props>(
             onValueChange={onChange}
             onSelect={() => setSelected(true)}
             className="h-10"
-            // FIXME: Select hack
-            onBlur={() => setTimeout(() => setSelected(false), 100)}
+            onBlur={(e) => {
+              if (e.relatedTarget === cmdRef.current) {
+                return;
+              }
+              setSelected(false);
+            }}
             autoFocus={true}
           />
           {selected && options.length > 0 && (
             <CommandList className="absolute top-[45px] z-10 max-h-[160px] w-full rounded-lg border bg-background">
               <CommandGroup>
                 {options.map((opt) => (
-                  <CommandItem key={opt} value={opt} onSelect={onChange}>
+                  <CommandItem
+                    key={opt}
+                    value={opt}
+                    onSelect={(val) => {
+                      onChange(val);
+                      setSelected(false);
+                    }}
+                  >
                     <Check
                       className={cn(
                         "mr-2 h-4 w-4",