fix(keyboard): recognize checkbox/radio as clickable inputs (#654)

testing-library · Apr 18, 2021 · 35d996e · 35d996e
1 parent d22ea5e
commit 35d996e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/src/__tests__/keyboard/plugin/functional.ts b/src/__tests__/keyboard/plugin/functional.ts
@@ -138,21 +138,43 @@ test('trigger click event on [Space] keyup on HTMLButtonElement', () => {
 })
 
 test('trigger click event on [Space] keyup on HTMLInputElement type=button', () => {
-  const {element, getEventSnapshot, getEvents} = setup(`<button/>`)
+  const {element, getEventSnapshot, getEvents} = setup(`<input type="button" />`)
   ;(element as HTMLButtonElement).focus()
 
   userEvent.keyboard('[Space]')
 
   expect(getEvents('click')).toHaveLength(1)
   expect(getEvents('click')[0]).toHaveProperty('detail', 0)
   expect(getEventSnapshot()).toMatchInlineSnapshot(`
-    Events fired on: button
+    Events fired on: input[value=""]
 
-    button - focus
-    button - focusin
-    button - keydown: (32)
-    button - keypress: (32)
-    button - keyup: (32)
-    button - click: Left (0)
+    input[value=""] - focus
+    input[value=""] - focusin
+    input[value=""] - keydown: (32)
+    input[value=""] - keypress: (32)
+    input[value=""] - keyup: (32)
+    input[value=""] - click: Left (0)
+  `)
+})
+
+test('trigger change event on [Space] keyup on HTMLInputElement type=radio', () => {
+  const {element, getEventSnapshot, getEvents} = setup(`<input type="radio" />`)
+  ;(element as HTMLInputElement).focus()
+
+  userEvent.keyboard('[Space]')
+
+  expect(getEvents('change')).toHaveLength(1)
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: input[checked=true]
+
+    input[checked=false] - focus
+    input[checked=false] - focusin
+    input[checked=false] - keydown: (32)
+    input[checked=false] - keypress: (32)
+    input[checked=false] - keyup: (32)
+    input[checked=true] - click: Left (0)
+      unchecked -> checked
+    input[checked=true] - input
+    input[checked=true] - change
   `)
 })
diff --git a/src/utils/click/isClickableInput.ts b/src/utils/click/isClickableInput.ts
@@ -7,6 +7,8 @@ const CLICKABLE_INPUT_TYPES = [
   'image',
   'reset',
   'submit',
+  'checkbox',
+  'radio',
 ]
 
 export function isClickableInput(element: Element): boolean {