From 21162abcf6ea47d790c4c3a69d891936c1b32a07 Mon Sep 17 00:00:00 2001
From: asyncguo <asyncguo@163.com>
Date: Fri, 30 Aug 2024 10:48:01 +0800
Subject: [PATCH] fix(theme): fix highlight effect when operating with keyboard
 (#1364)

---
 .../src/components/Search/SearchPanel.tsx     | 22 ++++++++++++++++++-
 .../src/components/Search/SuggestItem.tsx     |  7 +++++-
 .../src/components/Search/index.module.scss   |  1 -
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/theme-default/src/components/Search/SearchPanel.tsx b/packages/theme-default/src/components/Search/SearchPanel.tsx
index df5f32d1d..9b74a8d7d 100644
--- a/packages/theme-default/src/components/Search/SearchPanel.tsx
+++ b/packages/theme-default/src/components/Search/SearchPanel.tsx
@@ -61,6 +61,13 @@ export function SearchPanel({ focused, setFocused }: SearchPanelProps) {
   const pageSearcherConfigRef = useRef<PageSearcherConfig | null>(null);
   const searchResultRef = useRef(null);
   const searchResultTabRef = useRef(null);
+  const mousePositionRef = useRef<{
+    pageX: number | null;
+    pageY: number | null;
+  }>({
+    pageX: null,
+    pageY: null,
+  });
 
   // only scroll after keydown arrow up and arrow down.
   const [canScroll, setCanScroll] = useState(false);
@@ -394,10 +401,23 @@ export function SearchPanel({ focused, setFocused }: SearchPanelProps) {
                       key={`${suggestion.title}-${suggestionIndex}`}
                       suggestion={suggestion}
                       isCurrent={suggestionIndex === currentSuggestionIndex}
-                      setCurrentSuggestionIndex={() => {
+                      setCurrentSuggestionIndex={event => {
+                        if (
+                          mousePositionRef.current.pageX === event.pageX &&
+                          mousePositionRef.current.pageY === event.pageY
+                        ) {
+                          return;
+                        }
+
                         setCanScroll(false);
                         setCurrentSuggestionIndex(suggestionIndex);
                       }}
+                      onMouseMove={event => {
+                        mousePositionRef.current = {
+                          pageX: event.pageX,
+                          pageY: event.pageY,
+                        };
+                      }}
                       closeSearch={() => {
                         clearSearchState();
                       }}
diff --git a/packages/theme-default/src/components/Search/SuggestItem.tsx b/packages/theme-default/src/components/Search/SuggestItem.tsx
index 363cbbca8..dadd2a3a2 100644
--- a/packages/theme-default/src/components/Search/SuggestItem.tsx
+++ b/packages/theme-default/src/components/Search/SuggestItem.tsx
@@ -22,11 +22,15 @@ export function SuggestItem({
   setCurrentSuggestionIndex,
   inCurrentDocIndex,
   scrollTo,
+  onMouseMove,
 }: {
   suggestion: DefaultMatchResultItem;
   closeSearch: () => void;
   isCurrent: boolean;
-  setCurrentSuggestionIndex: () => void;
+  setCurrentSuggestionIndex: (
+    event: React.MouseEvent<HTMLLIElement, MouseEvent>,
+  ) => void;
+  onMouseMove: (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
   inCurrentDocIndex: boolean;
   scrollTo: (top: number, height: number) => void;
 }) {
@@ -118,6 +122,7 @@ export function SuggestItem({
       key={suggestion.link}
       className={`${styles.suggestItem} ${isCurrent ? styles.current : ''}`}
       onMouseEnter={setCurrentSuggestionIndex}
+      onMouseMove={onMouseMove}
       ref={selfRef}
     >
       <a
diff --git a/packages/theme-default/src/components/Search/index.module.scss b/packages/theme-default/src/components/Search/index.module.scss
index acad1a448..180d4af1e 100644
--- a/packages/theme-default/src/components/Search/index.module.scss
+++ b/packages/theme-default/src/components/Search/index.module.scss
@@ -172,7 +172,6 @@
     }
   }
 
-  &:hover,
   &.current {
     > a {
       background-color: var(--rp-c-brand);