user-event icon indicating copy to clipboard operation
user-event copied to clipboard

userEvent.keyboard('{Enter}') does not trigger form submission in forms with radio group elements

Open vinothkumar-tw opened this issue 11 months ago • 1 comments

Reproduction example

https://stackblitz.com/edit/rtl-template-dg4qziej?file=src%2FApp.tsx

Prerequisites

  1. Render the form with radio group and text input field.
  2. Submit the form using user event keyboard while focus on input text element
  3. userEvent.keyboard('{Enter}') does trigger form submission

Expected behavior

userEvent.keyboard('{Enter}') does trigger form submission

Actual behavior

userEvent.keyboard('{Enter}') does not trigger form submission

User-event version

14.5.2

Environment

Testing Library framework: @testing-library/[email protected]

JS framework: [email protected]

Test environment: [email protected]

DOM implementation: [email protected]

Additional context

Issue: userEvent.keyboard('{Enter}') does not trigger form submission when the form contains radio group elements. Observation: Using fireEvent.submit successfully triggers form submission under the same conditions.

vinothkumar-tw avatar Jan 16 '25 08:01 vinothkumar-tw

Thanks for contributing to this library.

On these input types Enter can trigger a submit: https://github.com/testing-library/user-event/blob/bc15a5be2d35dc531ff16d95db46075a536fea90/src/event/behavior/keypress.ts#L59-L68

We currently check if the form only contains one <input> element, as a second e.g. <input type="text"> disables this behavior in the browser, but e.g. a <select> does not affect it. Looks like any input element which isn't on the list is ignored as well. Can we confirm this? Is this defined in specs?

ph-fritsche avatar Jan 20 '25 11:01 ph-fritsche