Merge 1f7083a023 into 403141c96a

This reverts commit dc7791c245.

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 } from "@/components/Combobox";
+import { Combobox, ComboboxOption } from "@/components/Combobox";
 import { SelectMenuBasic } from "@/components/SelectMenuBasic";
 import Card from "@/components/Card";
 import FieldLabel from "@/components/FieldLabel";
@@ -94,11 +94,9 @@ 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 {
@@ -176,7 +174,6 @@ 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.`} />
@@ -207,8 +204,9 @@ export function MacroStepCard({
           )}
           <div className="relative w-full">
             <Combobox
-              onChange={(value) => {
-                onKeySelect({ value: value as string | null });
+              onChange={(option) => {
+                const selectedOption = option as ComboboxOption | null;
+                onKeySelect({ value: selectedOption?.value ?? null });
                 onKeyQueryChange('');
               }}
               displayValue={() => keyQuery}
@@ -223,7 +221,6 @@ 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." />

ui/src/components/WebRTCVideo.tsx

@@ -542,7 +542,7 @@ export default function WebRTCVideo() {
                           style={{ animationDuration: "500ms" }}
                           className="animate-slideUpFade pointer-events-none absolute inset-0 flex items-center justify-center"
                         >
-                          <div className="relative h-full w-full rounded-md">
+                          <div className="relative h-full w-full rounded-md" onClick={requestPointerLock}>
                             <LoadingVideoOverlay show={isVideoLoading} />
                             <HDMIErrorOverlay show={hdmiError} hdmiState={hdmiState} />
                             <NoAutoplayPermissionsOverlay