From 6a87b7a09a98028045ed720ca3dce8dbcb55e954 Mon Sep 17 00:00:00 2001 From: "MD. MOHIBUR RAHMAN" <35300157+mrpmohiburrahman@users.noreply.github.com> Date: Tue, 12 Nov 2024 09:50:28 +0600 Subject: [PATCH 1/7] feat: add skip blur option --- src/user-event/type/type.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/user-event/type/type.ts b/src/user-event/type/type.ts index 19fa66cc2..5d3ff0094 100644 --- a/src/user-event/type/type.ts +++ b/src/user-event/type/type.ts @@ -12,6 +12,7 @@ import { parseKeys } from './parse-keys'; export interface TypeOptions { skipPress?: boolean; submitEditing?: boolean; + skipBlur?: boolean; } export async function type( @@ -69,7 +70,9 @@ export async function type( dispatchEvent(element, 'endEditing', EventBuilder.TextInput.endEditing(finalText)); - dispatchEvent(element, 'blur', EventBuilder.Common.blur()); + if (!options?.skipBlur) { + dispatchEvent(element, 'blur', EventBuilder.Common.blur()); + } } type EmitTypingEventsContext = { From cf9136619a33406c1a489ad81669d1177ec7f82c Mon Sep 17 00:00:00 2001 From: "MD. MOHIBUR RAHMAN" <35300157+mrpmohiburrahman@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:13:59 +0600 Subject: [PATCH 2/7] fix: skipBlur option disables both endEditing and blur --- src/user-event/type/type.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/user-event/type/type.ts b/src/user-event/type/type.ts index 5d3ff0094..99061cd18 100644 --- a/src/user-event/type/type.ts +++ b/src/user-event/type/type.ts @@ -68,9 +68,8 @@ export async function type( dispatchEvent(element, 'submitEditing', EventBuilder.TextInput.submitEditing(finalText)); } - dispatchEvent(element, 'endEditing', EventBuilder.TextInput.endEditing(finalText)); - if (!options?.skipBlur) { + dispatchEvent(element, 'endEditing', EventBuilder.TextInput.endEditing(finalText)); dispatchEvent(element, 'blur', EventBuilder.Common.blur()); } } @@ -136,3 +135,4 @@ function isTextChangeAccepted(element: ReactTestInstance, text: string) { const maxLength = element.props.maxLength; return maxLength === undefined || text.length <= maxLength; } + From 6c1495d8e3be82a603552dadc8b15aecdf6118ac Mon Sep 17 00:00:00 2001 From: "MD. MOHIBUR RAHMAN" <35300157+mrpmohiburrahman@users.noreply.github.com> Date: Thu, 14 Nov 2024 10:50:58 +0600 Subject: [PATCH 3/7] docs: add skipBlur option to doc --- website/docs/13.x-next/docs/api/events/user-event.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/website/docs/13.x-next/docs/api/events/user-event.mdx b/website/docs/13.x-next/docs/api/events/user-event.mdx index 02eb4821f..f57cfa053 100644 --- a/website/docs/13.x-next/docs/api/events/user-event.mdx +++ b/website/docs/13.x-next/docs/api/events/user-event.mdx @@ -82,6 +82,7 @@ type( options?: { skipPress?: boolean submitEditing?: boolean + skipBlur?: boolean; } ``` @@ -104,6 +105,7 @@ This function will add text to the text already present in the text input (as sp - `skipPress` - if true, `pressIn` and `pressOut` events will not be triggered. - `submitEditing` - if true, `submitEditing` event will be triggered after typing the text. +- `skipBlur` - if true, `endEditing` and `blur` events will not be triggered when typing is complete. This is useful in scenarios where you want to prevent the TextInput from losing focus or avoid triggering certain actions associated with blur events. ### Sequence of events {#type-sequence} @@ -134,6 +136,7 @@ The `pressIn` and `pressOut` events are sent by default but can be skipped by pa - `blur` The `submitEditing` event is skipped by default. It can sent by setting the `submitEditing: true` option. +The `endEditing` and `blur` events can also be skipped by passing the `skipBlur: true` option. ## `clear()` From 94b4e3ae70046e28a8a0192972234f809e4446b1 Mon Sep 17 00:00:00 2001 From: "MD. MOHIBUR RAHMAN" <35300157+mrpmohiburrahman@users.noreply.github.com> Date: Thu, 14 Nov 2024 11:15:01 +0600 Subject: [PATCH 4/7] test: add unit testing for skipBlur --- .../type/__tests__/type-managed.test.tsx | 27 +++++++++++++++++ src/user-event/type/__tests__/type.test.tsx | 30 +++++++++++++++++++ 2 files changed, 57 insertions(+) diff --git a/src/user-event/type/__tests__/type-managed.test.tsx b/src/user-event/type/__tests__/type-managed.test.tsx index 37e9f03c7..6b1f45c9f 100644 --- a/src/user-event/type/__tests__/type-managed.test.tsx +++ b/src/user-event/type/__tests__/type-managed.test.tsx @@ -110,4 +110,31 @@ describe('type() for managed TextInput', () => { expect(events).toMatchSnapshot('input: "ABC", value: "XXX"'); }); + + it('skips blur and endEditing events when `skipBlur: true` in managed TextInput', async () => { + const { events, logEvent } = createEventLogger(); + render(); + + const user = userEvent.setup(); + await user.type(screen.getByTestId('input'), 'a', { + skipBlur: true, + }); + + const eventNames = getEventsNames(events); + + // Ensure 'endEditing' and 'blur' are not present + expect(eventNames).not.toContain('endEditing'); + expect(eventNames).not.toContain('blur'); + + // Verify the exact events that should be present + expect(eventNames).toEqual([ + 'pressIn', + 'focus', + 'pressOut', + 'keyPress', + 'change', + 'changeText', + 'selectionChange', + ]); + }); }); diff --git a/src/user-event/type/__tests__/type.test.tsx b/src/user-event/type/__tests__/type.test.tsx index 5753f4168..474216f58 100644 --- a/src/user-event/type/__tests__/type.test.tsx +++ b/src/user-event/type/__tests__/type.test.tsx @@ -386,4 +386,34 @@ describe('type()', () => { await user.type(input, ' World'); expect(input).toHaveDisplayValue('Hello World'); }); + + it('skips blur and endEditing events when `skipBlur: true`', async () => { + const { events } = renderTextInputWithToolkit(); + + const user = userEvent.setup(); + await user.type(screen.getByTestId('input'), 'a', { + skipBlur: true, + }); + + const eventNames = getEventsNames(events); + + // Ensure 'endEditing' and 'blur' are not present + expect(eventNames).not.toContain('endEditing'); + expect(eventNames).not.toContain('blur'); + + // Verify the exact events that should be present + expect(eventNames).toEqual([ + 'pressIn', + 'focus', + 'pressOut', + 'keyPress', + 'change', + 'changeText', + 'selectionChange', + ]); + + expect(lastEventPayload(events, 'selectionChange')).toMatchObject({ + nativeEvent: { selection: { start: 1, end: 1 } }, + }); + }); }); From 5a992e9c0f1a003fd515bad08987e998b557a774 Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Wed, 27 Nov 2024 09:39:06 +0100 Subject: [PATCH 5/7] docs: tweak --- website/docs/12.x/docs/api/events/user-event.mdx | 6 ++++-- website/docs/13.x-next/docs/api/events/user-event.mdx | 6 +++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/website/docs/12.x/docs/api/events/user-event.mdx b/website/docs/12.x/docs/api/events/user-event.mdx index 5a8379fe8..c5752e21d 100644 --- a/website/docs/12.x/docs/api/events/user-event.mdx +++ b/website/docs/12.x/docs/api/events/user-event.mdx @@ -86,8 +86,9 @@ type( element: ReactTestInstance, text: string, options?: { - skipPress?: boolean - submitEditing?: boolean + skipPress?: boolean; + skipBlur?: boolean; + submitEditing?: boolean; } ``` @@ -109,6 +110,7 @@ This function will add text to the text already present in the text input (as sp ### Options {#type-options} - `skipPress` - if true, `pressIn` and `pressOut` events will not be triggered. +- `skipBlur` - if true, `endEditing` and `blur` events will not be triggered when typing is complete. - `submitEditing` - if true, `submitEditing` event will be triggered after typing the text. ### Sequence of events {#type-sequence} diff --git a/website/docs/13.x-next/docs/api/events/user-event.mdx b/website/docs/13.x-next/docs/api/events/user-event.mdx index f57cfa053..55cc86bba 100644 --- a/website/docs/13.x-next/docs/api/events/user-event.mdx +++ b/website/docs/13.x-next/docs/api/events/user-event.mdx @@ -80,9 +80,9 @@ type( element: ReactTestInstance, text: string, options?: { - skipPress?: boolean - submitEditing?: boolean + skipPress?: boolean; skipBlur?: boolean; + submitEditing?: boolean; } ``` @@ -104,8 +104,8 @@ This function will add text to the text already present in the text input (as sp ### Options {#type-options} - `skipPress` - if true, `pressIn` and `pressOut` events will not be triggered. +- `skipBlur` - if true, `endEditing` and `blur` events will not be triggered when typing is complete. - `submitEditing` - if true, `submitEditing` event will be triggered after typing the text. -- `skipBlur` - if true, `endEditing` and `blur` events will not be triggered when typing is complete. This is useful in scenarios where you want to prevent the TextInput from losing focus or avoid triggering certain actions associated with blur events. ### Sequence of events {#type-sequence} From 36afe9e6b29401255ff54b8ab0ecf6b3fa7ff4af Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Wed, 27 Nov 2024 09:41:07 +0100 Subject: [PATCH 6/7] docs: tweaks --- website/docs/12.x/docs/api/events/user-event.mdx | 1 + website/docs/13.x-next/docs/api/events/user-event.mdx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/website/docs/12.x/docs/api/events/user-event.mdx b/website/docs/12.x/docs/api/events/user-event.mdx index c5752e21d..8bbc10907 100644 --- a/website/docs/12.x/docs/api/events/user-event.mdx +++ b/website/docs/12.x/docs/api/events/user-event.mdx @@ -142,6 +142,7 @@ The `pressIn` and `pressOut` events are sent by default but can be skipped by pa - `blur` The `submitEditing` event is skipped by default. It can sent by setting the `submitEditing: true` option. +The `endEditing` and `blur` events can be skipped by passing the `skipBlur: true` option. ## `clear()` diff --git a/website/docs/13.x-next/docs/api/events/user-event.mdx b/website/docs/13.x-next/docs/api/events/user-event.mdx index 55cc86bba..f554bc53e 100644 --- a/website/docs/13.x-next/docs/api/events/user-event.mdx +++ b/website/docs/13.x-next/docs/api/events/user-event.mdx @@ -136,7 +136,7 @@ The `pressIn` and `pressOut` events are sent by default but can be skipped by pa - `blur` The `submitEditing` event is skipped by default. It can sent by setting the `submitEditing: true` option. -The `endEditing` and `blur` events can also be skipped by passing the `skipBlur: true` option. +The `endEditing` and `blur` events can be skipped by passing the `skipBlur: true` option. ## `clear()` From f879e14e614864c763638dbc2b017481206cac6e Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Wed, 27 Nov 2024 09:44:17 +0100 Subject: [PATCH 7/7] chore: fix lint --- src/user-event/type/type.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/user-event/type/type.ts b/src/user-event/type/type.ts index 99061cd18..e9fcdf134 100644 --- a/src/user-event/type/type.ts +++ b/src/user-event/type/type.ts @@ -135,4 +135,3 @@ function isTextChangeAccepted(element: ReactTestInstance, text: string) { const maxLength = element.props.maxLength; return maxLength === undefined || text.length <= maxLength; } -