diff --git a/components/AlgoliaSearchModal.js b/components/AlgoliaSearchModal.js index eac9d8bfdee..4a84c5aa177 100644 --- a/components/AlgoliaSearchModal.js +++ b/components/AlgoliaSearchModal.js @@ -44,6 +44,8 @@ export default function AlgoliaSearchModal({ cRef }) { const [useTime, setUseTime] = useState(0) const [activeIndex, setActiveIndex] = useState(0) const [isLoading, setIsLoading] = useState(false) + const [isInputFocused, setIsInputFocused] = useState(false) + const inputRef = useRef(null) const router = useRouter() @@ -54,13 +56,16 @@ export default function AlgoliaSearchModal({ cRef }) { e.preventDefault() setIsModalOpen(true) }) - // 方向键调整选中 + // 修改快捷键的使用逻辑 useHotkeys( 'down', e => { - e.preventDefault() - if (activeIndex < searchResults.length - 1) { - setActiveIndex(activeIndex + 1) + if (isInputFocused) { + // 只有在聚焦时才触发 + e.preventDefault() + if (activeIndex < searchResults.length - 1) { + setActiveIndex(activeIndex + 1) + } } }, { enableOnFormTags: true } @@ -68,39 +73,40 @@ export default function AlgoliaSearchModal({ cRef }) { useHotkeys( 'up', e => { - e.preventDefault() - if (activeIndex > 0) { - setActiveIndex(activeIndex - 1) + if (isInputFocused) { + e.preventDefault() + if (activeIndex > 0) { + setActiveIndex(activeIndex - 1) + } } }, { enableOnFormTags: true } ) - // esc关闭 useHotkeys( 'esc', e => { - e.preventDefault() - setIsModalOpen(false) + if (isInputFocused) { + e.preventDefault() + setIsModalOpen(false) + } }, { enableOnFormTags: true } ) - - // 跳转Search结果 - const onJumpSearchResult = () => { - if (searchResults.length > 0) { - window.location.href = `${siteConfig('SUB_PATH', '')}/${searchResults[activeIndex].slug}` - } - } - // enter跳转 useHotkeys( 'enter', e => { - if (searchResults.length > 0) { + if (isInputFocused && searchResults.length > 0) { onJumpSearchResult(index) } }, { enableOnFormTags: true } ) + // 跳转Search结果 + const onJumpSearchResult = () => { + if (searchResults.length > 0) { + window.location.href = `${siteConfig('SUB_PATH', '')}/${searchResults[activeIndex].slug}` + } + } const resetSearch = () => { setActiveIndex(0) @@ -261,6 +267,8 @@ export default function AlgoliaSearchModal({ cRef }) { type='text' placeholder='在这里输入搜索关键词...' onChange={e => handleInputChange(e)} + onFocus={() => setIsInputFocused(true)} // 聚焦时 + onBlur={() => setIsInputFocused(false)} // 失去焦点时 className='text-black dark:text-gray-200 bg-gray-50 dark:bg-gray-600 outline-blue-500 w-full px-4 my-2 py-1 mb-4 border rounded-md' ref={inputRef} />