From 57d0ea7d677821e55c6bbd2bdf3ec95741a4c4a9 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Sun, 14 Feb 2021 02:35:10 +0800
Subject: [PATCH] =?UTF-8?q?:children=5Fcrossing:=20fix(search-bar):=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=90=91=E4=B8=8B=E5=88=87=E6=8D=A2=E7=84=A6?=
 =?UTF-8?q?=E7=82=B9=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/SearchInput/useKeyboardService.ts     | 24 ++++++++++++-------
 .../searchBar/app/useSearchService.ts         |  4 ++++
 types/SearchBar.d.ts                          |  1 +
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/contentScripts/searchBar/app/SearchInput/useKeyboardService.ts b/src/contentScripts/searchBar/app/SearchInput/useKeyboardService.ts
index b96a9e8..3ef29d5 100644
--- a/src/contentScripts/searchBar/app/SearchInput/useKeyboardService.ts
+++ b/src/contentScripts/searchBar/app/SearchInput/useKeyboardService.ts
@@ -5,16 +5,16 @@ import { getServiceToken } from '@/utils';
 import { SearchService } from '../useSearchService';
 import { SearchBarService } from '../useSearchBarService';
 
-type FocusType = 'input' | 'options' | 'result';
-
 /**
  * Keyboard 需要的状态
  */
 export const useKeyboardService = () => {
-  const { setType, optionKeys, optionActiveIndex } = useContext(SearchService);
+  const { setType, optionKeys, optionActiveIndex, isEmpty } = useContext(
+    SearchService,
+  );
   const { hide } = useContext(SearchBarService);
 
-  const [focusKey, setFocusKey] = useState<FocusType>('input');
+  const [focusKey, setFocusKey] = useState<SearchBar.FocusType>('input');
   const inputRef = useRef<Input>(null);
 
   /**
@@ -39,11 +39,14 @@ export const useKeyboardService = () => {
     inputRef.current?.focus();
     setFocusKey('input');
   };
-
   const focusOnOptions = () => {
     inputRef.current?.blur();
     setFocusKey('options');
   };
+  const focusOnResult = () => {
+    inputRef.current?.blur();
+    setFocusKey('result');
+  };
 
   // 将焦点切换到 Options
   const onKeyDown = (event: KeyboardEvent) => {
@@ -83,7 +86,11 @@ export const useKeyboardService = () => {
           break;
         case 'ArrowDown':
           event.preventDefault();
-          focusOnOptions();
+          if (isEmpty) {
+            focusOnOptions();
+          } else {
+            focusOnResult();
+          }
           break;
         default:
       }
@@ -96,12 +103,13 @@ export const useKeyboardService = () => {
     return () => {
       window.onkeydown = null;
     };
-  }, [focusKey, optionActiveIndex]);
+  }, [focusKey, optionActiveIndex, isEmpty]);
 
   return {
-    onKeyDown,
     focusKey,
     inputRef,
+
+    onKeyDown,
     focusOnInput,
     focusOnOptions,
   };
diff --git a/src/contentScripts/searchBar/app/useSearchService.ts b/src/contentScripts/searchBar/app/useSearchService.ts
index dd058e1..1d61179 100644
--- a/src/contentScripts/searchBar/app/useSearchService.ts
+++ b/src/contentScripts/searchBar/app/useSearchService.ts
@@ -11,6 +11,7 @@ import {
   combineLatest,
   filter,
   tap,
+  distinctUntilChanged,
 } from 'rxjs/operators';
 
 import { getServiceToken, request } from '@/utils';
@@ -66,6 +67,8 @@ export const useSearchService = () => {
         debounceTime(600),
         // 过滤掉没有值的情况
         filter((value) => value.length !== 0),
+        // 过滤相同值
+        distinctUntilChanged(),
         // 提供输入
         combineLatest(input$),
         // 3. 发起请求
@@ -104,6 +107,7 @@ export const useSearchService = () => {
     setType,
     related,
     setRelated,
+    isEmpty: data.length === 0,
   };
 };
 
diff --git a/types/SearchBar.d.ts b/types/SearchBar.d.ts
index 2461fc8..2063a61 100644
--- a/types/SearchBar.d.ts
+++ b/types/SearchBar.d.ts
@@ -3,6 +3,7 @@ declare module SearchBar {
     key: SearchBar.SearchType;
     title: string;
   }
+  type FocusType = 'input' | 'options' | 'result';
 
   export interface User {
     id: number;