fix(theme): fix highlight effect when operating with keyboard (#1364)

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();
                       }}

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

packages/theme-default/src/components/Search/index.module.scss

@@ -172,7 +172,6 @@
     }
   }
 
-  &:hover,
   &.current {
     > a {
       background-color: var(--rp-c-brand);