auto focus search input

nodetool-ai · Jan 13, 2025 · 7e6ff92 · 7e6ff92
1 parent fb2caec
commit 7e6ff92
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/web/src/components/context_menus/ConnectableNodes.tsx b/web/src/components/context_menus/ConnectableNodes.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import React, { memo, useCallback, useState, useRef } from "react";
+import React, { memo, useCallback, useState, useRef, useEffect } from "react";
 import {
   Menu,
   MenuItem,
@@ -164,6 +164,15 @@ const ConnectableNodes: React.FC<ConnectableNodesProps> = ({
   const [isFocused, setIsFocused] = useState(false);
   const focusedNodeRef = useRef<HTMLDivElement>(null);
   const currentHoveredNodeRef = useRef<NodeMetadata | null>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isVisible) {
+      setTimeout(() => {
+        searchInputRef.current?.focus();
+      }, 100);
+    }
+  }, [isVisible]);
 
   const filteredNodes = searchTerm
     ? searchNodesHelper(connectableNodes, searchTerm)
@@ -271,14 +280,14 @@ const ConnectableNodes: React.FC<ConnectableNodesProps> = ({
         </MenuItem>
         <MenuItem>
           <TextField
+            inputRef={searchInputRef}
             className="connectable-nodes-search"
             size="small"
             fullWidth
             placeholder="Search nodes..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
             onClick={(e) => e.stopPropagation()}
-            autoFocus
             onKeyDown={(e) => {
               if (e.key === "Escape") {
                 hideMenu();