Fixed an bug where RadioButton's onChange() will not be called when w…

…rapping with RadioGroup
trendmicro-frontend · Feb 13, 2018 · 3a702b7 · 3a702b7
1 parent 69cf802
commit 3a702b7
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 72 deletions.
diff --git a/dist/react-radio.css b/dist/react-radio.css
diff --git a/dist/react-radio.min.css b/dist/react-radio.min.css
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/index.html b/docs/index.html
@@ -11,5 +11,5 @@
 </head>
 <body style="background-color: #eee">
 <div id="container"></div>
-<script type="text/javascript" src="bundle.js?a4a99d36da42386169f8"></script></body>
+<script type="text/javascript" src="bundle.js?8f86772f41f9fd6b545b"></script></body>
 </html>
diff --git a/examples/RadioGroup.jsx b/examples/RadioGroup.jsx
@@ -11,11 +11,6 @@ export default class extends PureComponent {
     };
 
     handleChangeByKey = (key) => (value, event) => {
-        if (typeof value === 'object' && event === undefined) {
-            // Prevent onChange propagation
-            return;
-        }
-
         this.setState({ [key]: value });
     };
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trendmicro/react-radio",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "React Radio component",
   "main": "lib/index.js",
   "files": [
@@ -29,6 +29,11 @@
       "name": "Tina C Lin",
       "email": "[email protected]",
       "url": "https://github.com/trendmicro-frontend"
+    },
+    {
+      "name": "Cheton Wu",
+      "email": "[email protected]",
+      "url": "https://github.com/trendmicro-frontend"
     }
   ],
   "license": "MIT",
@@ -45,16 +50,17 @@
     "react": "^0.14.0 || >=15.0.0"
   },
   "dependencies": {
+    "chained-function": "^0.5.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.0"
   },
   "devDependencies": {
     "@trendmicro/react-anchor": "~0.5.6",
-    "@trendmicro/react-buttons": "~1.2.1",
-    "@trendmicro/react-tooltip": "~0.4.0",
+    "@trendmicro/react-buttons": "~1.3.0",
+    "@trendmicro/react-tooltip": "~0.5.0",
     "babel-cli": "~6.26.0",
     "babel-core": "~6.26.0",
-    "babel-eslint": "~8.1.2",
+    "babel-eslint": "~8.2.1",
     "babel-loader": "~7.1.2",
     "babel-plugin-transform-decorators-legacy": "~1.3.4",
     "babel-preset-env": "~1.6.1",
@@ -63,35 +69,35 @@
     "clean-css": "~4.1.9",
     "clean-css-cli": "~4.1.10",
     "coveralls": "~3.0.0",
-    "css-loader": "~0.28.7",
-    "enzyme": "~3.2.0",
+    "css-loader": "~0.28.9",
+    "enzyme": "~3.3.0",
     "enzyme-adapter-react-16": "~1.1.1",
-    "eslint": "~4.14.0",
+    "eslint": "~4.17.0",
     "eslint-config-trendmicro": "~1.3.0",
     "eslint-loader": "~1.9.0",
     "eslint-plugin-import": "~2.8.0",
     "eslint-plugin-jsx-a11y": "~6.0.3",
-    "eslint-plugin-react": "~7.5.1",
+    "eslint-plugin-react": "~7.6.1",
     "extract-text-webpack-plugin": "~3.0.2",
     "file-loader": "~1.1.6",
     "find-imports": "~0.5.2",
     "html-webpack-plugin": "~2.30.1",
-    "http-server": "~0.10.0",
-    "jsdom": "~11.5.1",
+    "http-server": "~0.11.1",
+    "jsdom": "~11.6.2",
     "nib": "~1.1.2",
     "react": "~16.2.0",
     "react-dom": "~16.2.0",
-    "sinon": "^4.1.3",
-    "style-loader": "~0.19.1",
-    "styled-components": "~2.4.0",
+    "sinon": "^4.3.0",
+    "style-loader": "~0.20.1",
+    "styled-components": "~3.1.6",
     "stylint": "~1.5.9",
     "stylint-loader": "~1.0.0",
     "stylus-loader": "~3.0.1",
-    "tap": "~11.0.1",
+    "tap": "~11.1.0",
     "trendmicro-ui": "~0.5.1",
     "url-loader": "~0.6.2",
-    "webpack": "~3.10.0",
-    "webpack-dev-server": "~2.9.7",
+    "webpack": "~3.11.0",
+    "webpack-dev-server": "~2.11.1",
     "which": "~1.3.0"
   }
 }
diff --git a/src/RadioGroup.jsx b/src/RadioGroup.jsx
@@ -1,3 +1,4 @@
+import chainedFunction from 'chained-function';
 import React, { cloneElement, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import RadioButton from './RadioButton';
@@ -14,8 +15,6 @@ class RadioGroup extends PureComponent {
     };
 
     handleChange = (value, event) => {
-        event.stopPropagation();
-
         if (typeof this.props.onChange === 'function') {
             this.props.onChange(value, event);
         }
@@ -36,7 +35,12 @@ class RadioGroup extends PureComponent {
                 return cloneElement(child, {
                     checked: this.props.value === child.props.value,
                     disabled: this.props.disabled || child.props.disabled,
-                    onChange: this.handleChange.bind(this, child.props.value)
+                    onChange: chainedFunction(
+                        child.props.onChange,
+                        (event) => {
+                            this.handleChange(child.props.value, event);
+                        }
+                    )
                 });
             }