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` | - | diff --git a/src/Mentions.tsx b/src/Mentions.tsx index 226cd99..61e3f8f 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; + silent?: boolean; filterOption?: false | typeof defaultFilterOption; validateSearch?: typeof defaultValidateSearch; onChange?: (text: string) => void; @@ -101,6 +102,7 @@ const InternalMentions = forwardRef( options, open, allowClear, + silent, // Events validateSearch = defaultValidateSearch, @@ -330,6 +332,11 @@ const InternalMentions = forwardRef( } 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 index f9ab2d8..939ea6d 100644 --- 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', () => {