fix: fix can not type in Chinese in proxy text filter input

1 files changed, 11 insertions, 4 deletions

diff --git a/src/components/proxies/TextFilter.tsx b/src/components/proxies/TextFilter.tsx
index acf83ae..6465572 100644
--- a/src/components/proxies/TextFilter.tsx
+++ b/src/components/proxies/TextFilter.tsx
@@ -1,24 +1,31 @@
+import debounce from 'lodash-es/debounce';
 import * as React from 'react';
 import { useRecoilState } from 'recoil';
 
 import { proxyFilterText } from '../../store/proxies';
 import shared from '../shared.module.css';
 
-const { useCallback } = React;
+const { useCallback, useState, useMemo } = React;
 
 export function TextFilter() {
-  const [text, setText] = useRecoilState(proxyFilterText);
+  const [, setTextGlobal] = useRecoilState(proxyFilterText);
+  const [text, setText] = useState('');
+
+  const setTextDebounced = useMemo(() => debounce(setTextGlobal, 300), [
+    setTextGlobal,
+  ]);
+
   const onChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       setText(e.target.value);
+      setTextDebounced(e.target.value);
     },
-    [setText]
+    [setTextDebounced]
   );
 
   return (
     <input
       className={shared.input}
-      spellCheck={false}
       type="text"
       value={text}
       onChange={onChange}