userEvent.keyboard('{Enter}') doesn't trigger form submission when the submit button is outside the form element, even if it’s associated with the form element by using the button's form attribute.

[tomohiro3]

Reproduction example

https://codesandbox.io/p/devbox/user-event-keyboard-enter-repro-6jvyx5?file=%2Fsrc%2FApp.test.tsx%3A26%2C1

Prerequisites

1. Render form element with an id and attach an event handler to onSubmit. Render radio buttons in it. Render a button outside the form with a form attribute which has the form id.
2. Give a mocked function to the form's onSubmit.
3. Give a focus in any ways to the radio button.
4. Call await user.keyboard("{enter}").
5. Assert onSubmit.

const App = ({ cb }) => {
  return (
    <div>
      <form id="form-test" onSubmit={cb}>
        <label>
          TestInput
          <input type="radio" />
        </label>
      </form>
      <button form="form-test">TestButton</button>
    </div>
  );
};

describe("Test", () => {
  it("works", async () => {
    const click = jest.fn();
    const user = userEvent.setup();

    render(<App cb={click} />);

    await user.click(screen.getByRole("radio", { name: "TestInput" }));
    await user.keyboard("{enter}");

    expect(click).toHaveBeenCalledTimes(1);
  });
});

Expected behavior

I expect the mock function given to onSubmit gets called.

Actual behavior

The mock function given to onSubmit doesn't get called

User-event version

14.5.2

Environment

Testing Library framework:

"@testing-library/jest-dom": "~6.4.0",
"@testing-library/react": "~15.0.6",
"@testing-library/user-event": "~14.5.0",

JS framework:
"react": "~18.3.1",

Test environment:

"jest": "~29.7.0",

DOM implementation:

"jest-environment-jsdom": "~29.7.0",

Additional context

I feel there are inconsistencies on the implicit submission of forms

• The test passes if I place the button inside the form element.
• The test passes if I change the radio button to a normal text input.
• The test fails with a checkbox too.
• I checked the form submission with the Enter keydown and the same elements structure, as written earlier, works on the latest version of Google Chrome, Safari, Firefox and Microsoft Edge.

[ph-fritsche]

Thanks for the report.

I think the inaccuracy is here:

user-event/src/event/behavior/keypress.ts

Lines 18 to 24 in d036279

	} else if (isElementType(target, 'input')) {
	const form = target.form
	const submit = form?.querySelector(
	'input[type="submit"], button:not([type]), button[type="submit"]',
	)
	if (submit) {
	return () => instance.dispatchUIEvent(submit, 'click')