From 09e114924eb1250c3786112b11d124c4c4482fae Mon Sep 17 00:00:00 2001
From: Andrew <Andrew5282011@gmail.com>
Date: Mon, 11 Oct 2021 21:22:28 +0300
Subject: [PATCH] fix: submit on enter keypress for checkboxes and radio
 buttons

---
 src/__tests__/keyboard/plugin/functional.ts | 25 +++++++++++++++++++++
 src/keyboard/plugins/functional.ts          | 17 +++++++++++---
 src/utils/index.ts                          |  1 +
 src/utils/misc/hasFormSubmit.ts             |  6 +++++
 4 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/misc/hasFormSubmit.ts

diff --git a/src/__tests__/keyboard/plugin/functional.ts b/src/__tests__/keyboard/plugin/functional.ts
index cc72f8e0..7c9c4744 100644
--- a/src/__tests__/keyboard/plugin/functional.ts
+++ b/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()
diff --git a/src/keyboard/plugins/functional.ts b/src/keyboard/plugins/functional.ts
index bfbc0a89..aeb8cb10 100644
--- a/src/keyboard/plugins/functional.ts
+++ b/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)
       }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 3a15cff0..560be5eb 100644
--- a/src/utils/index.ts
+++ b/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'
diff --git a/src/utils/misc/hasFormSubmit.ts b/src/utils/misc/hasFormSubmit.ts
new file mode 100644
index 00000000..b7baebc9
--- /dev/null
+++ b/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"]'))
+  )