Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add skip blur option #1704

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions src/user-event/type/__tests__/type-managed.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(<ManagedTextInput logEvent={logEvent} />);

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',
]);
});
});
30 changes: 30 additions & 0 deletions src/user-event/type/__tests__/type.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 } },
});
});
});
8 changes: 5 additions & 3 deletions src/user-event/type/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { parseKeys } from './parse-keys';
export interface TypeOptions {
skipPress?: boolean;
submitEditing?: boolean;
skipBlur?: boolean;
}

export async function type(
Expand Down Expand Up @@ -67,9 +68,10 @@ export async function type(
dispatchEvent(element, 'submitEditing', EventBuilder.TextInput.submitEditing(finalText));
}

dispatchEvent(element, 'endEditing', EventBuilder.TextInput.endEditing(finalText));

dispatchEvent(element, 'blur', EventBuilder.Common.blur());
if (!options?.skipBlur) {
mdjastrzebski marked this conversation as resolved.
Show resolved Hide resolved
dispatchEvent(element, 'endEditing', EventBuilder.TextInput.endEditing(finalText));
dispatchEvent(element, 'blur', EventBuilder.Common.blur());
}
}

type EmitTypingEventsContext = {
Expand Down
7 changes: 5 additions & 2 deletions website/docs/12.x/docs/api/events/user-event.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,9 @@ type(
element: ReactTestInstance,
text: string,
options?: {
skipPress?: boolean
submitEditing?: boolean
skipPress?: boolean;
skipBlur?: boolean;
submitEditing?: boolean;
}
```

Expand All @@ -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}
Expand Down Expand Up @@ -140,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()`

Expand Down
7 changes: 5 additions & 2 deletions website/docs/13.x-next/docs/api/events/user-event.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,9 @@ type(
element: ReactTestInstance,
text: string,
options?: {
skipPress?: boolean
submitEditing?: boolean
skipPress?: boolean;
skipBlur?: boolean;
submitEditing?: boolean;
}
```

Expand All @@ -103,6 +104,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}
Expand Down Expand Up @@ -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 be skipped by passing the `skipBlur: true` option.

## `clear()`

Expand Down