From 02f2d0a5997023e8306cdc1e02fb324d8f9308a8 Mon Sep 17 00:00:00 2001
From: gbanyan <gbanyan.huang@gmail.com>
Date: Thu, 20 Nov 2025 02:12:41 +0800
Subject: [PATCH] Fix search input autofocus issue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added autofocus configuration and manual focus call to ensure search input is immediately focusable when modal opens.

Changes:
- Added autofocus: true to PagefindUI config
- Added setTimeout to manually focus input after UI loads
- Ensures users can type immediately after opening search modal

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/search-modal.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/components/search-modal.tsx b/components/search-modal.tsx
index 704f043..4b3303b 100644
--- a/components/search-modal.tsx
+++ b/components/search-modal.tsx
@@ -42,6 +42,7 @@ export function SearchModal({ isOpen, onClose }: SearchModalProps) {
               showImages: false,
               excerptLength: 15,
               resetStyles: false,
+              autofocus: true,
               translations: {
                 placeholder: '搜尋文章...',
                 clear_search: '清除',
@@ -57,6 +58,14 @@ export function SearchModal({ isOpen, onClose }: SearchModalProps) {
               }
             });
             setIsLoaded(true);
+
+            // Auto-focus the search input after a short delay
+            setTimeout(() => {
+              const input = searchContainerRef.current?.querySelector('input[type="search"]') as HTMLInputElement;
+              if (input) {
+                input.focus();
+              }
+            }, 100);
           }
         };
         document.head.appendChild(script);