fix: fix can not type in Chinese in proxy text filter input
This commit is contained in:
parent
31fbdfc3df
commit
b93c0267c8
1 changed files with 11 additions and 4 deletions
|
@ -1,24 +1,31 @@
|
||||||
|
import debounce from 'lodash-es/debounce';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useRecoilState } from 'recoil';
|
import { useRecoilState } from 'recoil';
|
||||||
|
|
||||||
import { proxyFilterText } from '../../store/proxies';
|
import { proxyFilterText } from '../../store/proxies';
|
||||||
import shared from '../shared.module.css';
|
import shared from '../shared.module.css';
|
||||||
|
|
||||||
const { useCallback } = React;
|
const { useCallback, useState, useMemo } = React;
|
||||||
|
|
||||||
export function TextFilter() {
|
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(
|
const onChange = useCallback(
|
||||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
setText(e.target.value);
|
setText(e.target.value);
|
||||||
|
setTextDebounced(e.target.value);
|
||||||
},
|
},
|
||||||
[setText]
|
[setTextDebounced]
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<input
|
<input
|
||||||
className={shared.input}
|
className={shared.input}
|
||||||
spellCheck={false}
|
|
||||||
type="text"
|
type="text"
|
||||||
value={text}
|
value={text}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
|
|
Loading…
Reference in a new issue