userEvent.click() on the label of a radio input does not cause it to become checked in firefox

[willatoscilar]

Reproduction example

https://codesandbox.io/s/recursing-hoover-75289w?file=/src/App.js

Prerequisites

1. Render an input type="radio with a linked label e.g. <><label htmlFor="radio-foo">foo</label><input type="radio" id="foo" value="foo" /></>
2. 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/dom@9.3.1

JS framework: react@18.2.0

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+).

[sashafirsov]

Same with input type="checkbox"

"@vitest/browser@^2.0.5" ->"@testing-library/dom" "^10.4.0"

[sashafirsov]

The work around is to use fireEvent insteaf of userEvent

[kasvith]

still happens...whats the reason?