Merge c4c3880718 into cc9ff74276

ui/src/components/MacroStepCard.tsx

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { LuArrowUp, LuArrowDown, LuX, LuTrash2 } from "react-icons/lu";
 
 import { Button } from "@/components/Button";
-import { Combobox, ComboboxOption } from "@/components/Combobox";
+import { Combobox } from "@/components/Combobox";
 import { SelectMenuBasic } from "@/components/SelectMenuBasic";
 import Card from "@/components/Card";
 import FieldLabel from "@/components/FieldLabel";
@@ -94,9 +94,11 @@ export function MacroStepCard({
       })),
     [keyDisplayMap]
   );
+  
   const filteredKeys = useMemo(() => {
     const selectedKeys = ensureArray(step.keys);
     const availableKeys = keyOptions.filter(option => !selectedKeys.includes(option.value));
+    
     if (keyQuery === '') {
       return availableKeys;
     } else {
@@ -174,6 +176,7 @@ export function MacroStepCard({
             ))}
           </div>
         </div>
+        
         <div className="w-full flex flex-col gap-1">
           <div className="flex items-center gap-1">
             <FieldLabel label="Keys" description={`Maximum ${MAX_KEYS_PER_STEP} keys per step.`} />
@@ -204,9 +207,8 @@ export function MacroStepCard({
           )}
           <div className="relative w-full">
             <Combobox
-              onChange={(option) => {
+              onChange={(value) => {
-                const selectedOption = option as ComboboxOption | null;
+                onKeySelect({ value: value as string | null });
-                onKeySelect({ value: selectedOption?.value ?? null });
                 onKeyQueryChange('');
               }}
               displayValue={() => keyQuery}
@@ -221,6 +223,7 @@ export function MacroStepCard({
             />
           </div>
         </div>
+        
         <div className="w-full flex flex-col gap-1">
           <div className="flex items-center gap-1">
             <FieldLabel label="Step Duration" description="Time to wait before executing the next step." />
@@ -238,4 +241,4 @@ export function MacroStepCard({
       </div>
     </Card>
   );
-}
+}