happy-dom Checkbox onchange does not work

Checkbox onchange does not work

Open frankandrobot opened this issue 1 year ago • 5 comments

Steps to repo:

create a checkbox that fires an onchange handler
validate the onchange handler in the UI

Result:

the onchange handler does not fire

Environment:

@happy-dom/jest-environment: 6.0.2

Notes:

It works with jsdom!

// sample DOM
function OnChangeCheckbox() {
  const [checked, setChecked] = useState(false)
  return (
    <div>
      <label>
        <input type="checkbox" name="stability" onChange={() => setChecked(true)}/>
        Stability
      </label>
      {checked && <div>Checked</div>}
    </div>
  );
}

Example repo: https://gitlab.com/robotandkid/the-sandbox/-/blob/feat/upgrade-happy/happy-dom-test/src/checkbox-on-change.test.tsx#e54b4f0f756bbcc956d77b9a11423b25d116cc08

run yarn jest yarn jest src/checkbox-on-change.test.tsx

Jul 05 '22 22:07 frankandrobot

Here's another example of it failing and it also failing with userEvent.type, https://codesandbox.io/s/happy-dom-onchange-791uvl?file=/src/App.test.tsx and is also a reproduction of #467

Jul 08 '22 00:07 Akkuma

Note a workaround is to use fireEvent.input instead of userEvent.type

On Jul 7, 2022 7:50 PM, GW @.***> wrote:

Here's another example of it failing and it also failing with userEvent.type, https://codesandbox.io/s/happy-dom-onchange-791uvl?file=/src/App.test.tsx

— Reply to this email directly, view it on GitHubhttps://github.com/capricorn86/happy-dom/issues/531#issuecomment-1178414827, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAGAGML443LSOFNGAUQH3UDVS53OTANCNFSM52XTP5SQ. You are receiving this because you authored the thread.Message ID: @.***>

Jul 08 '22 02:07 frankandrobot

Note a workaround is to use fireEvent.input instead of userEvent.type

This isn't per se a workaround. This requires changing the event handler to onInput from onChange, which aren't the same event or behavior https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event.

I even updated the codesandbox to show you cannot just swap to fireEvent.input and have everything just work.

Jul 08 '22 12:07 Akkuma

No i meant that another bug is that userEvent.type in general does not work and a workaround is to use fireevent.input

On Jul 8, 2022 7:50 AM, GW @.***> wrote:

Note a workaround is to use fireEvent.input instead of userEvent.type

I even updated the codesandbox to show you cannot just swap to fireEvent.input and have everything just work.

— Reply to this email directly, view it on GitHubhttps://github.com/capricorn86/happy-dom/issues/531#issuecomment-1178953370, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAGAGMIMYH7M76GBAMV5UJDVTAP2FANCNFSM52XTP5SQ. You are receiving this because you authored the thread.Message ID: @.***>

Jul 09 '22 14:07 frankandrobot

Just ran into this issue. Clicking on the label doesn't seem to work either.

Jul 21 '22 08:07 pmfonsecatdx

Ran into the same issue. onChange is not fired but onClick is fired

Oct 24 '22 07:10 armaaar

Ran into a similar issue...

This test works with Jest in a Next project without Vite, but with Vite, vitest and using happy-dom, it doesn't work:

describe('<Checkbox />', () => {
  it('selects the checkbox', async () => {
    render(
      <input id="checkbox" data-testid="my-checkbox" type="checkbox" />
    );

    const checkbox: HTMLInputElement = screen.getByTestId("my-checkbox");

    await userEvent.click(checkbox);

    expect(checkbox.checked).toEqual(true);
  });
});

Nov 01 '22 17:11 abacchi00

I'm in a Typescript project using (React) MUI checkboxes where we're migrating from Jest with jsdom to Vitest with happy-dom, and we run into this same issue. Changing the onChange handlers to onClick solved it, but we had to do some extraneous type castings. Also, we had similar tests to @abacchi00 example above which we had to refactor.