testing-library
userEvent.click() on the label of a radio input does not cause it to become checked in firefox
Reproduction example
https://codesandbox.io/s/recursing-hoover-75289w?file=/src/App.js
Prerequisites
- Render an input type="radio with a linked label e.g.
<><label htmlFor="radio-foo">foo</label><input type="radio" id="foo" value="foo" /></> - Trigger a click on the label e.g.
await userEvent.click(screen.getByText('foo'))
Expected behavior
The radio input should become checked as it will in Chrome or Safari.
Actual behavior
In Firefox the radio input remains unchecked.
User-event version
14.0.0
Environment
Testing Library framework: @testing-library/[email protected]
JS framework: [email protected]
Test environment: Originally discovered in a storybook interaction test but reproduced independent of any testing environment.
DOM implementation: browser (specifically Firefox)
Additional context
Browser versions tested: Firefox: 115.0.3 - fails Chrome: 115.0.5790.114 - works Safari 16.4 - works
Looking at the implementation my best guess is that Firefox only triggers the implicit checked behavior when the event inherits from MouseEvent (as fireEvent.click uses) and not PointerEvent (as userEvent.click uses with v14+).
Same with input type="checkbox"
"@vitest/browser@^2.0.5" ->"@testing-library/dom" "^10.4.0"
