Checkbox should not be checked when clicking Label of disabled checkbox
Reproduction example
https://codesandbox.io/s/sparkling-sky-5g3t2j?file=/src/App.test.js
Prerequisites
- Render
<label><input type="checkbox" disabled /> Disabled Checkbox</label> - Click on the label element
Expected behavior
checkbox should not be checked
Actual behavior
checkbox is checked
User-event version
14.4.3
Environment
Testing Library framework:
JS framework:
Test environment:
DOM implementation:
Additional context
No response
Also able to replicate using v14.3.3. Working example here - with tests passing when selecting a text input, text input label and hitting the checkbox directly, so it's isolated to the label of a checkbox input
Hey there! I confirm the problem.
"@testing-library/user-event": "^14.4.3"
Test sample
const user = userEvent.setup();
test("should be unchecked after the click on disabled label", async () => {
// Arrange
render(<Checkbox disabled label="My label" />);
const label = screen.getByText("My label");
const checkbox = screen.getByLabelText("My label");
// Act & Assert
expect(checkbox).not.toBeChecked();
await user.click(label);
expect(checkbox).not.toBeChecked(); // fails on this line...
});
Hi there. I got the same issue with radio. "@testing-library/user-event": "^14.4.3" 😢
Similar example with plain jsdom: https://stackblitz.com/edit/vitest-dev-vitest-azkvzh?file=test/basic.test.ts
From a very naive point of view, I would say that line 12 and 13 in click.ts should be swapped, so that the click is only dispatched if the "control" was successfully focused.
I have the same problem after I upgraded to last version 14.4.3 from 13.5.0. In 13.5.0 it works as expected. Fix it, please.
Had to downgrade to 13.5.0 to unblock my tests (instead of using fireEvent which works), would love if the above posted MR to fix could get some love.