fix: select instead of focus search input (#8483)

packages/excalidraw/components/SearchMenu.tsx

@@ -10,8 +10,6 @@ import type { ExcalidrawTextElement } from "../element/types";
 import { measureText } from "../element/textElement";
 import { addEventListener, getFontString } from "../utils";
 import { KEYS } from "../keys";
-
-import "./SearchMenu.scss";
 import clsx from "clsx";
 import { atom, useAtom } from "jotai";
 import { jotaiScope } from "../jotai";
@@ -21,6 +19,8 @@ import { randomInteger } from "../random";
 import { CLASSES, EVENT } from "../constants";
 import { useStable } from "../hooks/useStable";
 
+import "./SearchMenu.scss";
+
 const searchKeywordAtom = atom<string>("");
 export const searchItemInFocusAtom = atom<number | null>(null);
 
@@ -229,6 +229,7 @@ export const SearchMenu = () => {
             });
           }
           searchInputRef.current?.focus();
+          searchInputRef.current?.select();
         } else {
           setAppState({
             openSidebar: null,
@@ -264,16 +265,6 @@ export const SearchMenu = () => {
     });
   }, [setAppState, stableState, app]);
 
-  /**
-   * NOTE:
-   *
-   * for testing purposes, we're manually focusing instead of
-   * setting `selectOnRender` on <TextField>
-   */
-  useEffect(() => {
-    searchInputRef.current?.focus();
-  }, []);
-
   const matchCount = `${searchMatches.items.length} ${
     searchMatches.items.length === 1
       ? t("search.singleResult")
@@ -292,6 +283,7 @@ export const SearchMenu = () => {
           onChange={(value) => {
             setKeyword(value);
           }}
+          selectOnRender
         />
       </div>
 

packages/excalidraw/components/TextField.tsx

@@ -51,6 +51,8 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
 
     useLayoutEffect(() => {
       if (selectOnRender) {
+        // focusing first is needed because vitest/jsdom
+        innerRef.current?.focus();
         innerRef.current?.select();
       }
     }, [selectOnRender]);