Fix search input autofocus issue

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>
This commit is contained in:
2025-11-20 02:12:41 +08:00
parent 2c9d5ed650
commit 02f2d0a599

View File

@@ -42,6 +42,7 @@ export function SearchModal({ isOpen, onClose }: SearchModalProps) {
showImages: false, showImages: false,
excerptLength: 15, excerptLength: 15,
resetStyles: false, resetStyles: false,
autofocus: true,
translations: { translations: {
placeholder: '搜尋文章...', placeholder: '搜尋文章...',
clear_search: '清除', clear_search: '清除',
@@ -57,6 +58,14 @@ export function SearchModal({ isOpen, onClose }: SearchModalProps) {
} }
}); });
setIsLoaded(true); 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); document.head.appendChild(script);