fix(keyboard): submit on enter keypress for checkboxes and radio butt…

…ons (#741) * fix: submit on enter keypress for checkboxes and radio buttons * fix clicking * fix tests Co-authored-by: Philipp Fritsche <[email protected]>
testing-library · Oct 18, 2021 · 97ba08e · 97ba08e
1 parent 9519979
commit 97ba08e
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 3 deletions.
diff --git a/src/__tests__/keyboard/plugin/functional.ts b/src/__tests__/keyboard/plugin/functional.ts
@@ -117,6 +117,36 @@ test('trigger click event on [Enter] keypress on HTMLButtonElement', () => {
   `)
 })
 
+test.each`
+  elementType   | submit      | hasForm
+  ${'checkbox'} | ${'input'}  | ${true}
+  ${'checkbox'} | ${'button'} | ${true}
+  ${'radio'}    | ${'input'}  | ${true}
+  ${'radio'}    | ${'button'} | ${true}
+  ${'checkbox'} | ${'input'}  | ${false}
+  ${'checkbox'} | ${'button'} | ${false}
+  ${'radio'}    | ${'input'}  | ${false}
+  ${'radio'}    | ${'button'} | ${false}
+`(
+  'trigger submit event on [Enter] keypress on HTMLInputElement type=$elementType with submit $submit and hasForm=$hasForm',
+  ({elementType, submit, hasForm}) => {
+    const {element, getEvents} = setup(
+      `<${hasForm ? 'form' : 'div'}>
+            <input type="${elementType}" />
+            ${submit === 'button' && '<button type="submit">submit</button>'}
+            ${submit === 'input' && '<input type="submit" />'}
+          </${hasForm ? 'form' : ''}>`,
+    )
+
+    element.querySelector('input')?.focus()
+
+    userEvent.keyboard('[Enter]')
+
+    expect(getEvents('click')).toHaveLength(0)
+    expect(getEvents('submit')).toHaveLength(hasForm ? 1 : 0)
+  },
+)
+
 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
@@ -6,6 +6,7 @@
 import {fireEvent} from '@testing-library/dom'
 import {
   calculateNewValue,
+  hasFormSubmit,
   isClickableInput,
   isCursorAtStart,
   isEditable,
@@ -81,6 +82,19 @@ export const keydownBehavior: behaviorPlugin[] = [
 ]
 
 export const keypressBehavior: behaviorPlugin[] = [
+  {
+    matches: (keyDef, element) =>
+      keyDef.key === 'Enter' &&
+      isElementType(element, 'input') &&
+      ['checkbox', 'radio'].includes(element.type),
+    handle: (keyDef, element) => {
+      const form = (element as HTMLInputElement).form
+
+      if (hasFormSubmit(form)) {
+        fireEvent.submit(form)
+      }
+    },
+  },
   {
     matches: (keyDef, element) =>
       keyDef.key === 'Enter' &&
@@ -99,9 +113,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
@@ -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
@@ -0,0 +1,8 @@
+export const hasFormSubmit = (
+  form: HTMLFormElement | null,
+): form is HTMLFormElement =>
+  !!(
+    form &&
+    (form.querySelector('input[type="submit"]') ||
+      form.querySelector('button[type="submit"]'))
+  )