Fix search input losing focus before hydration (RND-11849) (#4438)

Co-authored-by: Claude <noreply@anthropic.com>

.changeset/rnd-11849-search-focus-hydration.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fix the search field losing focus if it was focused just before the page finished hydrating.

packages/gitbook/src/components/Search/SearchInput.tsx

@@ -46,11 +46,22 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
         } = props;
         const inputRef = useRef<HTMLInputElement>(null);
         const isFrame = mode === 'frame';
+        const isInitialMountRef = useRef(true);
 
         const language = useLanguage();
 
         useEffect(() => {
+            const isInitialMount = isInitialMountRef.current;
+            isInitialMountRef.current = false;
+
             if (!isOpen) {
+                // A user can focus the SSR'd input natively before hydration attaches
+                // React's focus handler; syncing to "open" instead of blurring avoids
+                // stealing that focus back on mount.
+                if (isInitialMount && document.activeElement === inputRef.current) {
+                    onFocus?.();
+                    return;
+                }
                 inputRef.current?.blur();
                 return;
             }
@@ -69,7 +80,7 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
 
             const timeout = window.setTimeout(focusInput, 150);
             return () => window.clearTimeout(timeout);
-        }, [isFrame, isOpen, value.length]);
+        }, [isFrame, isOpen, value.length, onFocus]);
 
         return (
             <div