testing-library / testing-library/user-event

Typing and tabbing with @testing-library/dom does not fire change event

Open
#1,281 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug needs assessment
Dominant language
TypeScript
Stars
2.3k
Forks
258
PR merge metrics
No merged PRs in 30d

Description

Reproduction example

https://codesandbox.io/p/sandbox/crazy-shape-j8gs37

Prerequisites
  1. userEvent.type(input, "hello")
  2. userEvent.tab()

No change event appears to be fired.

Expected behavior

When a user types something into an input on the browser and tabs away (or otherwise blurs the input), the input will fire a change event if the value is different. But when this is simulated via @testing-library/user-event, this does not happen. Note that we're talking about the browser's actual change event and not the synthetic one that React creates around input events.

Actual behavior

No change event is fired.

User-event version

14.6.1

Environment

Testing Library framework: @testing-library/dom@10.4.0
JS framework: N/A
Test environment: jest@29.7.0
DOM implementation: jsdom@26.0.0

Additional context

As a workaround, we can manually dispatch a change event / use fireEvent.change. But given @testing-library/user-event's focus on recreating actual user interactions, I'd expect that to happen automatically.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox reproduction and the userEvent.type(input, "hello") followed by userEvent.tab() sequence. Check how these entry points handle typing and blurring, then verify that a browser-like change event appears only when the input value changed and focus leaves it.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
testing-qa
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.