fix: submit on enter keypress for checkboxes and radio buttons

src/__tests__/keyboard/plugin/functional.ts

@@ -117,6 +117,31 @@ test('trigger click event on [Enter] keypress on HTMLButtonElement', () => {
   `)
 })
 
+test.each`
+  elementType   | submit
+  ${'checkbox'} | ${'input'}
+  ${'checkbox'} | ${'button'}
+  ${'radio'}    | ${'input'}
+  ${'radio'}    | ${'button'}
+`(
+  'trigger submit event on [Enter] keypress on HTMLInputElement type=$elementType with submit $submit',
+  ({elementType, submit}) => {
+    const {element, getEvents} = setup(
+      `<form>
+            <input type="${elementType}" />
+            ${submit === 'button' && '<button type="submit">submit</button>'}
+            ${submit === 'input' && '<input type="submit" />'}
+          </form>`,
+    )
+
+    element.querySelector('input')?.focus()
+
+    userEvent.keyboard('[Enter]')
+
+    expect(getEvents('submit')).toHaveLength(1)
+  },
+)
+
 test('trigger click event on [Space] keyup on HTMLButtonElement', () => {
   const {element, getEventSnapshot, getEvents} = setup(`<button/>`)
   element.focus()

src/keyboard/plugins/functional.ts

@@ -6,6 +6,7 @@
 import {fireEvent} from '@testing-library/dom'
 import {
   calculateNewValue,
+  hasFormSubmit,
   isClickableInput,
   isCursorAtStart,
   isEditable,
@@ -81,6 +82,18 @@ export const keydownBehavior: behaviorPlugin[] = [
 ]
 
 export const keypressBehavior: behaviorPlugin[] = [
+  {
+    matches: (keyDef, element) =>
+      keyDef.key === 'Enter' &&
+      isElementType(element, 'input') &&
+      ['checkbox', 'radio'].includes(element.type) &&
+      hasFormSubmit(element.form),
+    handle: (keyDef, element) => {
+      const form = (element as HTMLInputElement).form as HTMLFormElement
+
+      fireEvent.submit(form)
+    },
+  },
   {
     matches: (keyDef, element) =>
       keyDef.key === 'Enter' &&
@@ -99,9 +112,7 @@ export const keypressBehavior: behaviorPlugin[] = [
 
       if (
         form &&
-        (form.querySelectorAll('input').length === 1 ||
-          form.querySelector('input[type="submit"]') ||
-          form.querySelector('button[type="submit"]'))
+        (form.querySelectorAll('input').length === 1 || hasFormSubmit(form))
       ) {
         fireEvent.submit(form)
       }

src/utils/index.ts

@@ -25,3 +25,4 @@ export * from './misc/isDisabled'
 export * from './misc/isDocument'
 export * from './misc/wait'
 export * from './misc/hasPointerEvents'
+export * from './misc/hasFormSubmit'

src/utils/misc/hasFormSubmit.ts

@@ -0,0 +1,6 @@
+export const hasFormSubmit = (form: HTMLFormElement | null) =>
+  !!(
+    form &&
+    (form.querySelector('input[type="submit"]') ||
+      form.querySelector('button[type="submit"]'))
+  )