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:
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user