add a input ref in viewmodel

Author: carl2027

frontend/app/element/search.tsx

@@ -11,12 +11,12 @@ import "./search.scss";
 
 type SearchProps = SearchAtoms & {
     anchorRef?: React.RefObject<HTMLElement>;
+	searchInputRef?: React.RefObject<HTMLInputElement>;
     offsetX?: number;
     offsetY?: number;
     onSearch?: (search: string) => void;
     onNext?: () => void;
     onPrev?: () => void;
-    blockId?: string;
 };
 
 const SearchComponent = ({
@@ -28,13 +28,15 @@ const SearchComponent = ({
     wholeWord: wholeWordAtom,
     isOpen: isOpenAtom,
     anchorRef,
+	searchInputRef: providedInputRef,
     offsetX = 10,
     offsetY = 10,
     onSearch,
     onNext,
     onPrev,
-    blockId,
 }: SearchProps) => {
+	const localInputRef = useRef<HTMLInputElement>(null);
+    const inputRef = providedInputRef || localInputRef;
     const [isOpen, setIsOpen] = useAtom<boolean>(isOpenAtom);
     const [search, setSearch] = useAtom<string>(searchAtom);
     const [index, setIndex] = useAtom<number>(indexAtom);
@@ -146,8 +148,9 @@ const SearchComponent = ({
         <>
             {isOpen && (
                 <FloatingPortal>
-                    <div className="search-container" style={{ ...floatingStyles }} ref={refs.setFloating} data-blockid={blockId}>
+                    <div className="search-container" style={{ ...floatingStyles }} ref={refs.setFloating}>
                         <Input
+							ref={inputRef}
                             placeholder="Search"
                             value={search}
                             onChange={setSearch}
@@ -190,7 +193,6 @@ type SearchOptions = {
     regex?: boolean;
     caseSensitive?: boolean;
     wholeWord?: boolean;
-    blockId?: string;
 };
 
 export function useSearch(options?: SearchOptions): SearchProps {
@@ -207,15 +209,19 @@ export function useSearch(options?: SearchOptions): SearchProps {
         []
     );
     const anchorRef = options?.anchorRef ?? useRef(null);
+	const searchInputRef = useRef<HTMLInputElement>(null);
     useEffect(() => {
         if (options?.viewModel) {
             options.viewModel.searchAtoms = searchAtoms;
+			// Store inputRef on viewModel for external access (e.g., keymodel.ts)
+            (options.viewModel as any).searchInputRef = searchInputRef;
             return () => {
                 options.viewModel.searchAtoms = undefined;
+				(options.viewModel as any).searchInputRef = undefined;
             };
         }
-    }, [options?.viewModel]);
-    return { ...searchAtoms, anchorRef, blockId: options?.blockId };
+    }, [options?.viewModel, searchAtoms]);
+    return { ...searchAtoms, anchorRef, searchInputRef };
 }
 
 const createToggleButtonDecl = (

frontend/app/store/keymodel.ts

@@ -653,48 +653,24 @@ function registerGlobalKeys() {
         return "";
     }
 
-    function focusSearchInput() {
-        setTimeout(() => {
-            const blockId = getFocusedBlockInStaticTab();
-            if (!blockId) {
-                return;
-            }
-
-            // Directly find the search container by data-blockid attribute
-            const searchContainer = document.querySelector(
-                `.search-container[data-blockid="${blockId}"]`
-            ) as HTMLElement;
-            if (searchContainer) {
-                const searchInput = searchContainer.querySelector("input") as HTMLInputElement;
-                if (searchInput) {
-                    searchInput.focus();
-                    searchInput.select();
-                }
-            }
-        }, 0);
-    }
-
     function activateSearch(event: WaveKeyboardEvent): boolean {
         const bcm = getBlockComponentModel(getFocusedBlockInStaticTab());
         // Ctrl+f is reserved in most shells.
         if (event.control && bcm.viewModel.viewType == "term") {
             return false;
         }
         if (bcm.viewModel.searchAtoms) {
-            const searchAtoms = bcm.viewModel.searchAtoms;
-            const isOpen = globalStore.get(searchAtoms.isOpen);
-            const selectedText = getSelectedText();
-
-            // Open search dialog if not already open
-            if (!isOpen) {
-                globalStore.set(searchAtoms.isOpen, true);
+			let selectedText = getSelectedText();
+			globalStore.set(bcm.viewModel.searchAtoms.isOpen, true);
+            globalStore.set(bcm.viewModel.searchAtoms.searchValue, selectedText);
+
+            // Focus the search input using the exposed searchInputRef
+            const searchInputRef = bcm.viewModel.searchInputRef;
+            if (searchInputRef?.current) {
+                setTimeout(() => {
+                    searchInputRef.current?.focus();
+                }, 10);
             }
-            // Set search value (use selected text if available, otherwise empty string)
-            globalStore.set(searchAtoms.searchValue, selectedText || "");
-            // Reset search results
-            globalStore.set(searchAtoms.resultsIndex, 0);
-            globalStore.set(searchAtoms.resultsCount, 0);
-            focusSearchInput();
             return true;
         }
         return false;

frontend/app/view/term/term.tsx

@@ -178,7 +178,6 @@ const TerminalView = ({ blockId, model }: ViewComponentProps<TermViewModel>) =>
         caseSensitive: false,
         wholeWord: false,
         regex: false,
-        blockId: blockId,
     });
     const searchIsOpen = jotai.useAtomValue<boolean>(searchProps.isOpen);
     const caseSensitive = useAtomValueSafe<boolean>(searchProps.caseSensitive);

frontend/app/view/webview/webview.tsx

@@ -821,7 +821,7 @@ const WebView = memo(({ model, onFailLoad, blockRef, initialSrc }: WebViewProps)
     }
 
     // Search
-    const searchProps = useSearch({ anchorRef: model.webviewRef, viewModel: model, blockId: model.blockId });
+    const searchProps = useSearch({ anchorRef: model.webviewRef, viewModel: model });
     const searchVal = useAtomValue<string>(searchProps.searchValue);
     const setSearchIndex = useSetAtom(searchProps.resultsIndex);
     const setNumSearchResults = useSetAtom(searchProps.resultsCount);