From c3adb2f53886067301250a272bc9db119c39756d Mon Sep 17 00:00:00 2001
From: Vishwam Subramanyam <vishwam@users.noreply.github.com>
Date: Fri, 1 Feb 2019 11:55:07 -0800
Subject: [PATCH] Fix checkbox and radioinput onchange issues (#59)

- Changed Checkbox and RadioInputs to be controlled components: pass the `checked` parameter instead of `defaultChecked` to fix issue when the checkbox state change did not reflect the new value. Also change the onChange handlers to return the new values from the incoming props instead of relying on the html element.
- Block search input onClick from propagating upwards - this fixes issue for mobile devices when clicking on the search input dismissed the element.
---
 CHANGELOG.md                               | 5 +++++
 lib/components/Input/CheckboxInput.tsx     | 5 +++--
 lib/components/Input/RadioInput.tsx        | 2 +-
 lib/components/SearchInput/SearchInput.tsx | 5 +++++
 package-lock.json                          | 2 +-
 package.json                               | 2 +-
 6 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 84abfcb..5b59067 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## v6.0.2
+### Fixed
+- Changed Checkbox and RadioInputs to be controlled components: pass the `checked` parameter instead of `defaultChecked` to fix issue when the checkbox state change did not reflect the new value. Also change the onChange handlers to return the new values from the incoming props instead of relying on the html element.
+- Block search input onClick from propagating upwards - this fixes issue for mobile devices when clicking on the search input dismissed the element.
+
 ## v6.0.1
 ### Fixed
 - The onchange handlers for Checkbox and RadioInputs stopped working in IoT Central; adding a dummy event handler to their parent `label` fixes the issue.
diff --git a/lib/components/Input/CheckboxInput.tsx b/lib/components/Input/CheckboxInput.tsx
index 86d788d..34053a9 100644
--- a/lib/components/Input/CheckboxInput.tsx
+++ b/lib/components/Input/CheckboxInput.tsx
@@ -70,8 +70,9 @@ export const CheckboxInput: React.StatelessComponent<CheckboxInputProps> = (prop
     const id = `${props.name}_checkbox`;
     
     const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        // Stop propagation and call the onChange handler with the new value.
         event.stopPropagation();
-        props.onChange(event.currentTarget.checked);
+        props.onChange(!props.checked);
     };
 
     return (
@@ -92,7 +93,7 @@ export const CheckboxInput: React.StatelessComponent<CheckboxInputProps> = (prop
                     name={props.name}
                     disabled={props.disabled}
                     hidden={props.hidden}
-                    defaultChecked={props.checked}
+                    checked={props.checked}
                     required={props.required}
                     onChange={onChange}
                     autoFocus={props.autoFocus}
diff --git a/lib/components/Input/RadioInput.tsx b/lib/components/Input/RadioInput.tsx
index 10eda43..635a40b 100644
--- a/lib/components/Input/RadioInput.tsx
+++ b/lib/components/Input/RadioInput.tsx
@@ -87,7 +87,7 @@ export const RadioInput: React.StatelessComponent<RadioInputProps> = (props: Rad
                         name={props.name}
                         disabled={props.disabled}
                         hidden={props.hidden}
-                        defaultChecked={props.checked}
+                        checked={props.checked}
                         onChange={onClick}
                         autoFocus={props.autoFocus}
                         required={props.required}
diff --git a/lib/components/SearchInput/SearchInput.tsx b/lib/components/SearchInput/SearchInput.tsx
index 67f5223..4fe25b6 100644
--- a/lib/components/SearchInput/SearchInput.tsx
+++ b/lib/components/SearchInput/SearchInput.tsx
@@ -49,6 +49,7 @@ export class SearchInput extends React.PureComponent<SearchInputProps> {
                             autoComplete: 'off', 
                             'aria-label': this.props.label,
                             type: 'search', 
+                            onClick: blockPropagation,
                             ...(this.props.attr && this.props.attr.input)
                         }
                     }}
@@ -58,4 +59,8 @@ export class SearchInput extends React.PureComponent<SearchInputProps> {
     }
 }
 
+function blockPropagation(event: React.MouseEvent<HTMLInputElement>) {
+    event.stopPropagation();
+}
+
 export default SearchInput;
diff --git a/package-lock.json b/package-lock.json
index da57748..152e970 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/azure-iot-ux-fluent-controls",
-    "version": "6.0.1",
+    "version": "6.0.2",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
diff --git a/package.json b/package.json
index 38adb78..5872911 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/azure-iot-ux-fluent-controls",
-    "version": "6.0.1",
+    "version": "6.0.2",
     "description": "Azure IoT UX Fluent Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",