[Bug]: `userEvent.click()` not working as expected after upgrading Storybook to 8.x

[allozaur]

Describe the bug

I have some components that use <input type="checkbox" /> or <details> + <summary> tags.

When using Storybook 7.x, interactions tests that used userEvent.click() worked just fine, but after upgrading to 8.x the same stories without any changes in code just stopped working.

To Reproduce

Create a component that uses a <details> + <summary> tags and write an interaction test that click the summary to open <details> or a component using <input type="checkbox"> and an interaction test clicking the input.

In first case, the open attribute won't be triggered and in second case checked attribute won't be triggered.

System

- Operating system: macOS 14.3.1
- Browser: Firefox
- Node: 20.x

Additional context

Not working in Storybook 8.x

Reproduction code:

• Accordion
• Checkbox

https://github.com/storybookjs/storybook/assets/37627284/61f81c1c-7140-4189-be0f-4231e3568e25

Working in Storybook 7.x

Reproduction code:

• Accordion
• Checkbox

https://github.com/storybookjs/storybook/assets/37627284/d8394cb4-954b-4adf-a2e0-be8b51d7201e

[kasperpeulen]

Could it be related to this issue?

https://github.com/testing-library/user-event/issues/1075#issuecomment-1948093169

[allozaur]

hmmm, it seems so! i just re-checked on Chrome and Safari and userEvent.click() actually worked...

Also switching to fireEvent worked for Firefox, but that still seems like rubbing the problem under the rug, rather than fully addressing it... I know it's on Testing Library's team to fix that, but still this can make a lot of people scratch their heads.

The strange thing tho is that in latest versio nof 7.x the problem was not present and the issue you referenced is there since 2022, long time before the latest release of 7.x. I think that this should be investigated regardless of the workaround that you shared in your message, @kasperpeulen

[kasperpeulen]

In 7.x we used an older version which didnt had this bug. But this older version had other bugs that had no workaround.. So we decided it was most sensible to upgrade.

[jaens]

testing-library/user-event looks unmaintained at the moment, no pull requests merged for ~7 months, no response to a question asking about maintenance status for over a month.

Not really a good situation since Storybook is using it as a foundational dependency and re-exporting it. :smiling_face_with_tear:

[eifr]

I'm experiencing it too on 8.3.6 on chrome.. invoking userEvent.click twice in a row works

[kasperpeulen]

Workaround:

export const Submitting = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const submitButton = canvas.getByRole('button', { name: /Submit/i });
-   await userEvent.click(submitButton);
+   await fireEvent.click(submitButton);
  },
};

But fireEvent does a lot less than userEvent, so you might have to manually do the stuff that userEvent does (focus, hover etc).

This has to be fixed in testing-library-user-event itself. So I think we should close this issue here. We might want to help testing-library though. cc @vanessayuenn @shilman

@jaens The maintainer of tl/user-event responded to you. Hopefully, some fixes get merged soon.