onChange events do not work on checkbox and radio button elements

[pkolt]

Describe the bug
The onChange event is not generated when clicking on the checkbox and radio button elements. This breaks tests that used to work on jsdom.

 const { container } = render(<App />);
 const checkbox = screen.getByTestId('checkbox');
 await userEvent.click(checkbox);

This was already discussed in issue, but for some reason this ticket was closed. The problem is not solved and new happy-dom users face it again and again. I suggest fixing this problem or documenting this feature in the happy-dom.

To Reproduce
https://github.com/pkolt/bug_checkbox_happy_dom

Expected behavior
When clicking on the checkbox and radio button elements, onChange events are triggered.

[pkolt]

It is interesting that if you use native events - change, without the participation of React.js then the test passes successfully.

it('event change', async () => {
    const handle = vi.fn();
    render(<App />);
    const checkbox = screen.getByTestId('tea') as HTMLInputElement;
    checkbox.addEventListener('change', handle); // ❗️
    await userEvent.click(checkbox);
    expect(handle).toHaveBeenCalled(); // ✅
  });

But if the subscription to the onChange event comes from React.js, then the event handler is not executed.

it('event onChange', async () => {
    const { container } = render(<App />);
    const checkbox = screen.getByTestId('tea') as HTMLInputElement;
    await userEvent.click(checkbox);
    expect(container.innerHTML).toMatch('Selected Tea'); // ❌
  });

It seems that the problem is in the interaction between React.js and happy-dom, in the place of subscription to the onChange event.

[capricorn86]

Thank you for reporting @pkolt! 🙂

The issue has now been fixed.

React is apparently overriding the getter and setter for the HTMLInputElement.checked property with a wrapper for storing its state. As the internal logic of Happy DOM was setting the "checked" value using the setter, the React wrapper was called to store the checked state. React then failed to compare the old state with the new state as they where always the same value.

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v9.10.3