From 35d996eebd431a5839eb5be0a79b0f5d069693b8 Mon Sep 17 00:00:00 2001
From: bozdoz <howaboutben+github@gmail.com>
Date: Sun, 18 Apr 2021 05:48:15 -0300
Subject: [PATCH] fix(keyboard): recognize `checkbox`/`radio` as clickable
 inputs (#654)

---
 src/__tests__/keyboard/plugin/functional.ts | 38 ++++++++++++++++-----
 src/utils/click/isClickableInput.ts         |  2 ++
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/__tests__/keyboard/plugin/functional.ts b/src/__tests__/keyboard/plugin/functional.ts
index 388ee71e..51047b26 100644
--- a/src/__tests__/keyboard/plugin/functional.ts
+++ b/src/__tests__/keyboard/plugin/functional.ts
@@ -138,7 +138,7 @@ 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]')
@@ -146,13 +146,35 @@ test('trigger click event on [Space] keyup on HTMLInputElement type=button', ()
   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
index 26054dee..c29eedeb 100644
--- 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 {