feat: Do not respond to the Enter event when data is loading (#257)

* feat: Do not respond to the Enter event when data is loading * Update src/Mentions.tsx Co-authored-by: afc163 <[email protected]> * feat: change loading to silent * docs: adding silent * test: update --------- Co-authored-by: afc163 <[email protected]>
react-component · Jun 6, 2024 · 39a078d · 39a078d
1 parent d05c344
commit 39a078d
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -80,6 +80,7 @@ React.render(<Demo />, 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`                                   | -           |

diff --git a/src/Mentions.tsx b/src/Mentions.tsx
@@ -55,6 +55,7 @@ export interface MentionsProps extends BaseTextareaAttrs {
   prefix?: string | string[];
   prefixCls?: string;
   value?: string;
+  silent?: boolean;
   filterOption?: false | typeof defaultFilterOption;
   validateSearch?: typeof defaultValidateSearch;
   onChange?: (text: string) => void;
@@ -101,6 +102,7 @@ const InternalMentions = forwardRef<MentionsRef, MentionsProps>(
       options,
       open,
       allowClear,
+      silent,
 
       // Events
       validateSearch = defaultValidateSearch,
@@ -330,6 +332,11 @@ const InternalMentions = forwardRef<MentionsRef, MentionsProps>(
       } else if (which === KeyCode.ENTER) {
         // Measure hit
         event.preventDefault();
+        // loading skip
+        if (silent) {
+          return;
+        }
+
         if (!mergedOptions.length) {
           stopMeasure();
           return;

diff --git a/tests/Mentions.spec.tsx b/tests/Mentions.spec.tsx
@@ -40,15 +40,15 @@ describe('Mentions', () => {
     return render(createMentions(props));
   }
 
-  describe('focus test', () => {
-    beforeEach(() => {
-      jest.useFakeTimers();
-    });
+  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'));
@@ -135,6 +135,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({ silent: 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', () => {