testing-library / testing-library/user-event
Disabled checkbox inside a label still triggers onChange method when clicked
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.3k
- Forks
- 258
- PR merge metrics
- No merged PRs in 30d
Description
Reproduction example
https://codesandbox.io/p/sandbox/zealous-feynman-rxvrlm?file=%2Fsrc%2FApp.test.js
Prerequisites
- Render a component with an
<input type="checkbox" onChange={yourFunc} disabled />inside a<label>. - Click any element inside the
<label>(or the label itself).
Expected behavior
The onChange method of the checkbox should not be called, as the checkbox is disabled.
Actual behavior
The onChange method of the checkbox is being called.
User-event version
14.5.2
Environment
If the Codesandbox is not available, it is easily reproducible by a single test file:
import "@testing-library/jest-dom";
import { render } from "@testing-library/react";
import { screen } from "@testing-library/dom";
import { userEvent } from "@testing-library/user-event";
describe("Checkbox", () => {
it("does not execute onChange if checkbox is disabled", async () => {
const onChange = vi.fn(); // also reproducible with jest.fn();
render(
<label>
<input type="checkbox" onChange={onChange} data-testid="input" disabled />
<span>My label</span>
</label>
);
await userEvent.click(screen.getByText("My label"));
expect(onChange).not.toHaveBeenCalled(); // this fails
});
});
Additional context
If the same test is performed but using the onClick event, the test is successful and the event is not called. However, onChange should not be called either. When trying this same scenario in a real browser, onChange is correctly ignored.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the supplied reproduction and the userEvent.click call, focusing on the disabled checkbox inside a label. Compare the simulated behavior with the stated real-browser behavior and trace the event handling for the label and checkbox. Done means the provided test passes without invoking onChange.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- testing
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 50/100