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

@@ -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.

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}

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}

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;

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",