From 46f8ebf29ae77d80760e4da194ee0a72f2a0f038 Mon Sep 17 00:00:00 2001 From: Wanpan Date: Thu, 6 Jun 2024 00:55:57 +0800 Subject: [PATCH 1/5] feat: Do not respond to the Enter event when data is loading --- src/Mentions.tsx | 5 +++++ tests/Mentions.spec.tsx | 22 ++++++++++++++++++++++ 2 files changed, 27 insertions(+) diff --git a/src/Mentions.tsx b/src/Mentions.tsx index 226cd99..9384c8b 100644 --- a/src/Mentions.tsx +++ b/src/Mentions.tsx @@ -55,6 +55,7 @@ export interface MentionsProps extends BaseTextareaAttrs { prefix?: string | string[]; prefixCls?: string; value?: string; + loading?: boolean; filterOption?: false | typeof defaultFilterOption; validateSearch?: typeof defaultValidateSearch; onChange?: (text: string) => void; @@ -101,6 +102,7 @@ const InternalMentions = forwardRef( options, open, allowClear, + loading, // Events validateSearch = defaultValidateSearch, @@ -330,6 +332,9 @@ const InternalMentions = forwardRef( } else if (which === KeyCode.ENTER) { // Measure hit event.preventDefault(); + // loading skip + if (loading) return; + if (!mergedOptions.length) { stopMeasure(); return; diff --git a/tests/Mentions.spec.tsx b/tests/Mentions.spec.tsx index f9ab2d8..99f36db 100644 --- a/tests/Mentions.spec.tsx +++ b/tests/Mentions.spec.tsx @@ -40,6 +40,10 @@ describe('Mentions', () => { return render(createMentions(props)); } + beforeEach(() => { + jest.useFakeTimers(); + }); + describe('focus test', () => { beforeEach(() => { jest.useFakeTimers(); @@ -135,6 +139,24 @@ describe('Mentions', () => { }); expect(onChange).toHaveBeenCalledWith('bamboo'); }); + + it('Keyboard Enter event', () => { + const { container, rerender } = renderMentions(); + simulateInput(container, '@lig'); + fireEvent.keyDown(container.querySelector('textarea'), { + which: KeyCode.ENTER, + keyCode: KeyCode.ENTER, + }); + expect(container.querySelector('textarea').value).toBe('@light '); + + rerender(createMentions({ loading: true })); + simulateInput(container, '@lig'); + fireEvent.keyDown(container.querySelector('textarea'), { + which: KeyCode.ENTER, + keyCode: KeyCode.ENTER, + }); + expect(container.querySelector('textarea').value).toBe('@lig'); + }); }); describe('support children Option', () => { From 935039bfa420b5591ed8a221265994038df82041 Mon Sep 17 00:00:00 2001 From: Wanpan Date: Thu, 6 Jun 2024 13:41:05 +0800 Subject: [PATCH 2/5] Update src/Mentions.tsx Co-authored-by: afc163 --- src/Mentions.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Mentions.tsx b/src/Mentions.tsx index 9384c8b..6b98062 100644 --- a/src/Mentions.tsx +++ b/src/Mentions.tsx @@ -333,7 +333,9 @@ const InternalMentions = forwardRef( // Measure hit event.preventDefault(); // loading skip - if (loading) return; + if (loading) { + return; + } if (!mergedOptions.length) { stopMeasure(); From 3b6087751e2231589f369271dca8ad6b5e7d452c Mon Sep 17 00:00:00 2001 From: Wanpan Date: Thu, 6 Jun 2024 13:45:43 +0800 Subject: [PATCH 3/5] feat: change loading to silent --- src/Mentions.tsx | 6 +++--- tests/Mentions.spec.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Mentions.tsx b/src/Mentions.tsx index 6b98062..61e3f8f 100644 --- a/src/Mentions.tsx +++ b/src/Mentions.tsx @@ -55,7 +55,7 @@ export interface MentionsProps extends BaseTextareaAttrs { prefix?: string | string[]; prefixCls?: string; value?: string; - loading?: boolean; + silent?: boolean; filterOption?: false | typeof defaultFilterOption; validateSearch?: typeof defaultValidateSearch; onChange?: (text: string) => void; @@ -102,7 +102,7 @@ const InternalMentions = forwardRef( options, open, allowClear, - loading, + silent, // Events validateSearch = defaultValidateSearch, @@ -333,7 +333,7 @@ const InternalMentions = forwardRef( // Measure hit event.preventDefault(); // loading skip - if (loading) { + if (silent) { return; } diff --git a/tests/Mentions.spec.tsx b/tests/Mentions.spec.tsx index 99f36db..9929374 100644 --- a/tests/Mentions.spec.tsx +++ b/tests/Mentions.spec.tsx @@ -149,7 +149,7 @@ describe('Mentions', () => { }); expect(container.querySelector('textarea').value).toBe('@light '); - rerender(createMentions({ loading: true })); + rerender(createMentions({ silent: true })); simulateInput(container, '@lig'); fireEvent.keyDown(container.querySelector('textarea'), { which: KeyCode.ENTER, From 86452b94f13912b57046070024d170d52e6a5893 Mon Sep 17 00:00:00 2001 From: Wanpan Date: Thu, 6 Jun 2024 14:17:46 +0800 Subject: [PATCH 4/5] docs: adding silent --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 24f3a93..38738da 100644 --- a/README.md +++ b/README.md @@ -80,6 +80,7 @@ React.render(, container); | prefix | Set trigger prefix keyword | `string \| string[]` | '@' | | rows | Set row count | `number` | 1 | | split | Set split string before and after selected mention | `string` | ' ' | +| silent | Used in transition phase, does not respond to keyboard enter events when equal to `true` | `boolean` | `false` | | validateSearch | Customize trigger search logic | `(text: string, props: MentionsProps) => void` | - | | value | Set value of mentions | `string` | - | | onChange | Trigger when value changed | `(text: string) => void` | - | From dee79c8ea09ddf26a8d133b3cf91a8db2f5cfd31 Mon Sep 17 00:00:00 2001 From: Wanpan Date: Thu, 6 Jun 2024 14:48:36 +0800 Subject: [PATCH 5/5] test: update --- tests/Mentions.spec.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/tests/Mentions.spec.tsx b/tests/Mentions.spec.tsx index 9929374..939ea6d 100644 --- a/tests/Mentions.spec.tsx +++ b/tests/Mentions.spec.tsx @@ -44,15 +44,11 @@ describe('Mentions', () => { jest.useFakeTimers(); }); - describe('focus test', () => { - beforeEach(() => { - jest.useFakeTimers(); - }); - - afterEach(() => { - jest.useRealTimers(); - }); + afterEach(() => { + jest.useRealTimers(); + }); + describe('focus test', () => { it('autoFocus', () => { const { container } = renderMentions({ autoFocus: true }); expect(document.activeElement).toBe(container.querySelector('textarea'));