fix(radio): stops onSelect firing twice every time we click a radio

fix #657
pluralsight · Sep 17, 2019 · 15c5c87 · 15c5c87
1 parent c8f15c8
commit 15c5c87
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 30 deletions.
diff --git a/packages/form/src/react/__specs__/__snapshots__/storyshots.spec.js.snap b/packages/form/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
@@ -646,14 +646,19 @@ exports[`Storyshots Sample Form sample 1`] = `
             onFocus={[Function]}
             onKeyDown={[Function]}
             role="radiogroup"
-            tabIndex="0"
+            style={
+              Object {
+                "maxWidth": "none",
+                "width": "100%",
+              }
+            }
+            tabIndex={0}
           >
             <div
               data-css-xp79s5=""
             >
               <label
                 data-css-kn3wr0=""
-                onClick={[Function]}
               >
                 <div
                   data-css-1gbdc34=""
@@ -674,6 +679,7 @@ exports[`Storyshots Sample Form sample 1`] = `
                 <input
                   checked={false}
                   data-css-gyrv08=""
+                  onClick={[Function]}
                   readOnly={true}
                   tabIndex="-1"
                   type="radio"
@@ -691,7 +697,6 @@ exports[`Storyshots Sample Form sample 1`] = `
             >
               <label
                 data-css-kn3wr0=""
-                onClick={[Function]}
               >
                 <div
                   data-css-1gbdc34=""
@@ -712,6 +717,7 @@ exports[`Storyshots Sample Form sample 1`] = `
                 <input
                   checked={false}
                   data-css-gyrv08=""
+                  onClick={[Function]}
                   readOnly={true}
                   tabIndex="-1"
                   type="radio"
@@ -738,7 +744,7 @@ exports[`Storyshots Sample Form sample 1`] = `
         >
           <button
             aria-checked={false}
-            data-css-1fg1tn7=""
+            data-css-nq9iqf=""
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -749,7 +755,7 @@ exports[`Storyshots Sample Form sample 1`] = `
                 "width": "100%",
               }
             }
-            tabIndex="0"
+            tabIndex={0}
           >
             <div
               data-css-480533=""
@@ -801,7 +807,7 @@ exports[`Storyshots Sample Form sample 1`] = `
               Comment
             </div>
             <div
-              data-css-1ghdxx6=""
+              data-css-1ios7mb=""
             >
               <div
                 data-css-1xm24a9=""

diff --git a/packages/radio/src/react/__specs__/__snapshots__/storyshots.spec.js.snap b/packages/radio/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
@@ -20,7 +20,6 @@ exports[`Storyshots Radio default 1`] = `
     >
       <label
         data-css-kn3wr0=""
-        onClick={[Function]}
       >
         <div
           data-css-1gbdc34=""
@@ -41,6 +40,7 @@ exports[`Storyshots Radio default 1`] = `
         <input
           checked={false}
           data-css-gyrv08=""
+          onClick={[Function]}
           readOnly={true}
           tabIndex="-1"
           type="radio"
@@ -58,7 +58,6 @@ exports[`Storyshots Radio default 1`] = `
     >
       <label
         data-css-kn3wr0=""
-        onClick={[Function]}
       >
         <div
           data-css-1gbdc34=""
@@ -79,6 +78,7 @@ exports[`Storyshots Radio default 1`] = `
         <input
           checked={false}
           data-css-gyrv08=""
+          onClick={[Function]}
           readOnly={true}
           tabIndex="-1"
           type="radio"
@@ -96,7 +96,6 @@ exports[`Storyshots Radio default 1`] = `
     >
       <label
         data-css-kn3wr0=""
-        onClick={[Function]}
       >
         <div
           data-css-1gbdc34=""
@@ -117,6 +116,7 @@ exports[`Storyshots Radio default 1`] = `
         <input
           checked={false}
           data-css-gyrv08=""
+          onClick={[Function]}
           readOnly={true}
           tabIndex="-1"
           type="radio"
@@ -153,7 +153,6 @@ exports[`Storyshots Radio disabled & error 1`] = `
     >
       <label
         data-css-kn3wr0=""
-        onClick={null}
       >
         <div
           data-css-1gbdc34=""
@@ -174,6 +173,7 @@ exports[`Storyshots Radio disabled & error 1`] = `
         <input
           checked={false}
           data-css-gyrv08=""
+          onClick={null}
           readOnly={true}
           tabIndex="-1"
           type="radio"
@@ -191,7 +191,6 @@ exports[`Storyshots Radio disabled & error 1`] = `
     >
       <label
         data-css-kn3wr0=""
-        onClick={null}
       >
         <div
           data-css-1gbdc34=""
@@ -216,6 +215,7 @@ exports[`Storyshots Radio disabled & error 1`] = `
         <input
           checked={true}
           data-css-gyrv08=""
+          onClick={null}
           readOnly={true}
           tabIndex="-1"
           type="radio"
@@ -233,7 +233,6 @@ exports[`Storyshots Radio disabled & error 1`] = `
     >
       <label
         data-css-kn3wr0=""
-        onClick={null}
       >
         <div
           data-css-1gbdc34=""
@@ -254,6 +253,7 @@ exports[`Storyshots Radio disabled & error 1`] = `
         <input
           checked={false}
           data-css-gyrv08=""
+          onClick={null}
           readOnly={true}
           tabIndex="-1"
           type="radio"
@@ -290,7 +290,6 @@ exports[`Storyshots Radio disabled 1`] = `
     >
       <label
         data-css-kn3wr0=""
-        onClick={null}
       >
         <div
           data-css-1gbdc34=""
@@ -311,6 +310,7 @@ exports[`Storyshots Radio disabled 1`] = `
         <input
           checked={false}
           data-css-gyrv08=""
+          onClick={null}
           readOnly={true}
           tabIndex="-1"
           type="radio"
@@ -328,7 +328,6 @@ exports[`Storyshots Radio disabled 1`] = `
     >
       <label
         data-css-kn3wr0=""
-        onClick={null}
       >
         <div
           data-css-1gbdc34=""
@@ -353,6 +352,7 @@ exports[`Storyshots Radio disabled 1`] = `
         <input
           checked={true}
           data-css-gyrv08=""
+          onClick={null}
           readOnly={true}
           tabIndex="-1"
           type="radio"
@@ -370,7 +370,6 @@ exports[`Storyshots Radio disabled 1`] = `
     >
       <label
         data-css-kn3wr0=""
-        onClick={null}
       >
         <div
           data-css-1gbdc34=""
@@ -391,6 +390,7 @@ exports[`Storyshots Radio disabled 1`] = `
         <input
           checked={false}
           data-css-gyrv08=""
+          onClick={null}
           readOnly={true}
           tabIndex="-1"
           type="radio"
@@ -427,7 +427,6 @@ exports[`Storyshots Radio error 1`] = `
     >
       <label
         data-css-kn3wr0=""
-        onClick={[Function]}
       >
         <div
           data-css-1gbdc34=""
@@ -448,6 +447,7 @@ exports[`Storyshots Radio error 1`] = `
         <input
           checked={false}
           data-css-gyrv08=""
+          onClick={[Function]}
           readOnly={true}
           tabIndex="-1"
           type="radio"
@@ -465,7 +465,6 @@ exports[`Storyshots Radio error 1`] = `
     >
       <label
         data-css-kn3wr0=""
-        onClick={[Function]}
       >
         <div
           data-css-1gbdc34=""
@@ -490,6 +489,7 @@ exports[`Storyshots Radio error 1`] = `
         <input
           checked={true}
           data-css-gyrv08=""
+          onClick={[Function]}
           readOnly={true}
           tabIndex="-1"
           type="radio"
@@ -507,7 +507,6 @@ exports[`Storyshots Radio error 1`] = `
     >
       <label
         data-css-kn3wr0=""
-        onClick={[Function]}
       >
         <div
           data-css-1gbdc34=""
@@ -528,6 +527,7 @@ exports[`Storyshots Radio error 1`] = `
         <input
           checked={false}
           data-css-gyrv08=""
+          onClick={[Function]}
           readOnly={true}
           tabIndex="-1"
           type="radio"
@@ -564,7 +564,6 @@ exports[`Storyshots Radio one selected 1`] = `
     >
       <label
         data-css-kn3wr0=""
-        onClick={[Function]}
       >
         <div
           data-css-1gbdc34=""
@@ -585,6 +584,7 @@ exports[`Storyshots Radio one selected 1`] = `
         <input
           checked={false}
           data-css-gyrv08=""
+          onClick={[Function]}
           readOnly={true}
           tabIndex="-1"
           type="radio"
@@ -602,7 +602,6 @@ exports[`Storyshots Radio one selected 1`] = `
     >
       <label
         data-css-kn3wr0=""
-        onClick={[Function]}
       >
         <div
           data-css-1gbdc34=""
@@ -627,6 +626,7 @@ exports[`Storyshots Radio one selected 1`] = `
         <input
           checked={true}
           data-css-gyrv08=""
+          onClick={[Function]}
           readOnly={true}
           tabIndex="-1"
           type="radio"
@@ -644,7 +644,6 @@ exports[`Storyshots Radio one selected 1`] = `
     >
       <label
         data-css-kn3wr0=""
-        onClick={[Function]}
       >
         <div
           data-css-1gbdc34=""
@@ -665,6 +664,7 @@ exports[`Storyshots Radio one selected 1`] = `
         <input
           checked={false}
           data-css-gyrv08=""
+          onClick={[Function]}
           readOnly={true}
           tabIndex="-1"
           type="radio"
@@ -713,7 +713,6 @@ exports[`Storyshots Radio state demo 1`] = `
       >
         <label
           data-css-kn3wr0=""
-          onClick={[Function]}
         >
           <div
             data-css-1gbdc34=""
@@ -738,6 +737,7 @@ exports[`Storyshots Radio state demo 1`] = `
           <input
             checked={true}
             data-css-gyrv08=""
+            onClick={[Function]}
             readOnly={true}
             tabIndex="-1"
             type="radio"
@@ -755,7 +755,6 @@ exports[`Storyshots Radio state demo 1`] = `
       >
         <label
           data-css-kn3wr0=""
-          onClick={[Function]}
         >
           <div
             data-css-1gbdc34=""
@@ -776,6 +775,7 @@ exports[`Storyshots Radio state demo 1`] = `
           <input
             checked={false}
             data-css-gyrv08=""
+            onClick={[Function]}
             readOnly={true}
             tabIndex="-1"
             type="radio"
@@ -793,7 +793,6 @@ exports[`Storyshots Radio state demo 1`] = `
       >
         <label
           data-css-kn3wr0=""
-          onClick={[Function]}
         >
           <div
             data-css-1gbdc34=""
@@ -814,6 +813,7 @@ exports[`Storyshots Radio state demo 1`] = `
           <input
             checked={false}
             data-css-gyrv08=""
+            onClick={[Function]}
             readOnly={true}
             tabIndex="-1"
             type="radio"

diff --git a/packages/radio/src/react/__specs__/index.spec.js b/packages/radio/src/react/__specs__/index.spec.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 
 import Radio from '../index.js'
 
@@ -19,4 +19,17 @@ describe('Radio', () => {
     expect(group.current).not.toBeNull()
     expect(button.current).not.toBeNull()
   })
+  it('fires event once', () => {
+    const spy = jest.fn()
+    const { container } = render(
+      <Radio.Group onSelect={spy}>
+        <Radio.Button value="red" label="Red" />
+        <Radio.Button value="green" label="Green" />
+        <Radio.Button value="blue" label="Blue" />
+      </Radio.Group>
+    )
+    const radio = container.querySelector('label')
+    fireEvent.click(radio)
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
 })