Firefox: userEvent.click does not submit forms

[anilanar]

Reproduction example

https://codesandbox.io/s/nervous-microservice-nmm3h7?file=/src/index.js

Prerequisites

0. Use Firefox, not jsdom.
1. Render a form with an onSubmit handler and a button inside the form such as <button type="submit" />.
2. Use userEvent.click to click the button in the form.

Expected behavior

Form's onSubmit handler should trigger.

Actual behavior

Form's onSubmit handler does not trigger.

User-event version

14.4.3

Environment

Firefox 106.0.2 (64-bit) Linux

Additional context

No response

[anilanar]

I believe this bug affects more than it looks, also in chromiums, but I cannot prove it.

[anilanar]

Our chromatic interaction tests that runs in chrome (or chromium, not sure if headless or not), using storybook play functions, stopped working after upgrading from 14.2.1 to 14.4.3 due to clicks not triggering submit events for forms. Not exactly sure what version of chrome/chromium and I couldn't reproduce it locally with chrome/chromium, but could reproduce it with Firefox as you can see above.

Downgrading to 14.3.0 seems to fix the issue.

[ph-fritsche]

Thanks for reporting this.

Maybe this is somehow related to #1002
We're working on changing our test environment. Hopefully this will allow us to tackle these issues. See #1019

[anilanar]

@ph-fritsche This issue is introduced with 14.4.0 (#1003 or #1009?) and is not reproducible in 14.3.0, if that helps.

[mscrivo]

Seeing similar issues here with userEvent.pointer. We have a test that clicks and resizes and resizable drawer and the test was checking whether the size has changed, and it never does now with 14.4+, but worked fine on 14.3 and below.

[sergei-maertens]

I'm seeing this behaviour too but it's inconsistent - in some storybook tests userEvent.click(...) to submit a form works fine, for others I need to fall back on fireEvent and some other crutches to prevent my tests from asserting things too soon because my form submit handler is still executing 😕

Seeing it on testing-library/user-events 14.4.3 but also on the latest 14.5.1, in combination with Storybook 7.3.2

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

@ph-fritsche I don't really understand why this works, because I thought userEvent uses fireEvent under the hood.

[nomoreyesterday]

export const EmptySubmit: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const SubmitButton = canvas.getByRole('button', { name: /submit/i });
    await expect(SubmitButton).toBeInTheDocument();
    await fireEvent.click(SubmitButton)
    expect(canvas.getByText(/Username must be at least 2 characters./i)).toBeInTheDocument();
  },

fireEvent only didn't work for me but if add userEvent that's work

export const EmptySubmit: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const SubmitButton = canvas.getByRole('button', { name: /submit/i });
    await expect(SubmitButton).toBeInTheDocument();
    await fireEvent.click(SubmitButton)
+   await userEvent.click(SubmitButton)
    expect(canvas.getByText(/Username must be at least 2 characters./i)).toBeInTheDocument();
  },

edit : userEvent work in google chrome
but firefox still error