From e74ef346a9271a50e7b921d613ae3c92c97641ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <645381995@qq.com> Date: Thu, 18 Jul 2024 09:17:02 +0800 Subject: [PATCH 1/4] feat: Prevent long press of enter --- src/Input.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/Input.tsx b/src/Input.tsx index 261f14d..66c3436 100644 --- a/src/Input.tsx +++ b/src/Input.tsx @@ -23,6 +23,7 @@ const Input = forwardRef((props, ref) => { onBlur, onPressEnter, onKeyDown, + onKeyUp, prefixCls = 'rc-input', disabled, htmlSize, @@ -42,6 +43,7 @@ const Input = forwardRef((props, ref) => { const [focused, setFocused] = useState(false); const compositionRef = useRef(false); + const enterRef = useRef(false); const inputRef = useRef(null); const holderRef = useRef(null); @@ -155,10 +157,18 @@ const Input = forwardRef((props, ref) => { }; const handleKeyDown = (e: React.KeyboardEvent) => { + onKeyDown?.(e); if (onPressEnter && e.key === 'Enter') { + if (enterRef.current) return; + enterRef.current = true; onPressEnter(e); } - onKeyDown?.(e); + }; + const handleKeyUp = (e: React.KeyboardEvent) => { + onKeyUp?.(e); + if (e.key === 'Enter') { + enterRef.current = false; + } }; const handleFocus: React.FocusEventHandler = (e) => { @@ -215,6 +225,7 @@ const Input = forwardRef((props, ref) => { onFocus={handleFocus} onBlur={handleBlur} onKeyDown={handleKeyDown} + onKeyUp={handleKeyUp} className={clsx( prefixCls, { From b3b963e7a6c1930e4660a4b7e1bf865678bf7281 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <645381995@qq.com> Date: Thu, 18 Jul 2024 09:20:16 +0800 Subject: [PATCH 2/4] feat: test --- tests/index.test.tsx | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/tests/index.test.tsx b/tests/index.test.tsx index 8d104ab..59a5a26 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -40,6 +40,26 @@ describe('Input', () => { expect(onPressEnter).toHaveBeenCalled(); }); + it('should prevent long press of enter', () => { + const onKeyDown = jest.fn(); + const onPressEnter = jest.fn(); + const onKeyUp = jest.fn(); + const { container } = render( + , + ); + const inputEl = container.querySelector('input')!; + fireEvent.keyDown(inputEl, { key: 'Enter' }); + fireEvent.keyDown(inputEl, { key: 'Enter' }); + fireEvent.keyUp(inputEl, { key: 'Enter' }); + expect(onKeyDown).toBeCalledTimes(2); + expect(onPressEnter).toBeCalledTimes(1); + expect(onKeyUp).toBeCalledTimes(1); + }); + it('should trigger onChange', () => { const onChange = jest.fn(); const { container } = render(); From 2e9c8e7ee9e8a94cc88e238c7da6ce71edf0fa77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <645381995@qq.com> Date: Thu, 18 Jul 2024 10:23:11 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20if?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Input.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Input.tsx b/src/Input.tsx index 66c3436..ad3d000 100644 --- a/src/Input.tsx +++ b/src/Input.tsx @@ -158,8 +158,7 @@ const Input = forwardRef((props, ref) => { const handleKeyDown = (e: React.KeyboardEvent) => { onKeyDown?.(e); - if (onPressEnter && e.key === 'Enter') { - if (enterRef.current) return; + if (onPressEnter && e.key === 'Enter' && !enterRef.current) { enterRef.current = true; onPressEnter(e); } From 63b5cba13695fc8292200dd5a65919b942071b9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <645381995@qq.com> Date: Thu, 18 Jul 2024 10:47:39 +0800 Subject: [PATCH 4/4] feat: keyLockRef --- src/Input.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Input.tsx b/src/Input.tsx index ad3d000..7ab86fb 100644 --- a/src/Input.tsx +++ b/src/Input.tsx @@ -43,7 +43,7 @@ const Input = forwardRef((props, ref) => { const [focused, setFocused] = useState(false); const compositionRef = useRef(false); - const enterRef = useRef(false); + const keyLockRef = useRef(false); const inputRef = useRef(null); const holderRef = useRef(null); @@ -158,15 +158,15 @@ const Input = forwardRef((props, ref) => { const handleKeyDown = (e: React.KeyboardEvent) => { onKeyDown?.(e); - if (onPressEnter && e.key === 'Enter' && !enterRef.current) { - enterRef.current = true; + if (onPressEnter && e.key === 'Enter' && !keyLockRef.current) { + keyLockRef.current = true; onPressEnter(e); } }; const handleKeyUp = (e: React.KeyboardEvent) => { onKeyUp?.(e); if (e.key === 'Enter') { - enterRef.current = false; + keyLockRef.current = false; } };