Merge pull request #2877 from tangly1024/fix/page-scroll-by-key

修复网页无法用上下按键翻页

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 }
+  )
+  useHotkeys(
+    'enter',
+    e => {
+      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}`
     }
   }
-  // enter跳转
-  useHotkeys(
-    'enter',
-    e => {
-      if (searchResults.length > 0) {
-        onJumpSearchResult(index)
-      }
-    },
-    { enableOnFormTags: true }
-  )
 
   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}
         />