From 58ab95215063b42fb418f6aa5195772bcba0c337 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Fri, 4 Jul 2025 14:38:21 -0700
Subject: [PATCH] get back code removed by accidental sync (#2884)

---
 .../panels/WorkflowNodeLibraryPanel.tsx       | 40 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowNodeLibraryPanel.tsx b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowNodeLibraryPanel.tsx
index 0aa02f18..b3fe47e6 100644
--- a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowNodeLibraryPanel.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowNodeLibraryPanel.tsx
@@ -1,6 +1,6 @@
 import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 import { useWorkflowPanelStore } from "@/store/WorkflowPanelStore";
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import {
   Cross2Icon,
   PlusIcon,
@@ -232,10 +232,45 @@ function WorkflowNodeLibraryPanel({ onNodeClick, first }: Props) {
   const workflowPanelData = useWorkflowPanelStore(
     (state) => state.workflowPanelState.data,
   );
+  const workflowPanelActive = useWorkflowPanelStore(
+    (state) => state.workflowPanelState.active,
+  );
   const closeWorkflowPanel = useWorkflowPanelStore(
     (state) => state.closeWorkflowPanel,
   );
   const [search, setSearch] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    // Focus the input when the panel becomes active
+    if (workflowPanelActive && inputRef.current) {
+      // Use multiple approaches to ensure focus works
+      const focusInput = () => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+          inputRef.current.select(); // Also select any existing text
+        }
+      };
+
+      // Try immediate focus
+      focusInput();
+
+      // Also try with a small delay for animations/transitions
+      const timeoutId = setTimeout(() => {
+        focusInput();
+      }, 100);
+
+      // And try with a longer delay as backup
+      const backupTimeoutId = setTimeout(() => {
+        focusInput();
+      }, 300);
+
+      return () => {
+        clearTimeout(timeoutId);
+        clearTimeout(backupTimeoutId);
+      };
+    }
+  }, [workflowPanelActive]);
 
   const filteredItems = nodeLibraryItems.filter((item) => {
     if (workflowPanelData?.disableLoop && item.nodeType === "loop") {
@@ -288,6 +323,9 @@ function WorkflowNodeLibraryPanel({ onNodeClick, first }: Props) {
             }}
             placeholder="Search blocks..."
             className="pl-9"
+            ref={inputRef}
+            autoFocus
+            tabIndex={0}
           />
         </div>
         <ScrollArea>