From cc7040b46efeda4edf57af9268be2948ff399a5d Mon Sep 17 00:00:00 2001
From: Ankur Kakroo <akakroo@sapient.com>
Date: Mon, 11 Mar 2019 17:13:00 +0530
Subject: [PATCH 1/2] Added event support in the input elements

---
 .../Form/FieldCheckbox/FieldCheckbox.js       | 20 +++++++++++++--
 .../molecules/Form/FieldInput/FieldInput.js   | 25 ++++++++++++++++++-
 .../Form/FieldRadioGroup/FieldRadioGroup.js   | 25 +++++++++++++------
 .../molecules/Form/FieldSelect/FieldSelect.js | 17 ++++++++++++-
 .../Form/FieldTextarea/FieldTextarea.js       | 21 +++++++++++++++-
 5 files changed, 95 insertions(+), 13 deletions(-)

diff --git a/lib/components/molecules/Form/FieldCheckbox/FieldCheckbox.js b/lib/components/molecules/Form/FieldCheckbox/FieldCheckbox.js
index 4e9ca3034..af6a72695 100644
--- a/lib/components/molecules/Form/FieldCheckbox/FieldCheckbox.js
+++ b/lib/components/molecules/Form/FieldCheckbox/FieldCheckbox.js
@@ -11,13 +11,28 @@ type Props = {
   id?: string,
   className?: string,
   name: string,
+  onChange?: Function,
 };
 
-const FieldCheckbox = ({ id, className, name, ...others }: Props): Node => (
+const FieldCheckbox = ({ id, className, name, onChange, ...others }: Props): Node => (
   <div className={className}>
     <Field
       name={name}
-      render={({ field }) => <InputChoice type="checkbox" id={id || name} {...field} {...others} />}
+      render={({ field, form }) => {
+        const { handleChange } = form;
+        return (
+          <InputChoice
+            type="checkbox"
+            id={id || name}
+            {...field}
+            {...others}
+            onChange={e => {
+              handleChange(e);
+              if (typeof onChange === 'function') onChange(e, form);
+            }}
+          />
+        );
+      }}
     />
     <ErrorMessage name={name} component={FieldError} />
   </div>
@@ -26,6 +41,7 @@ const FieldCheckbox = ({ id, className, name, ...others }: Props): Node => (
 FieldCheckbox.defaultProps = {
   id: '',
   className: '',
+  onChange: null,
 };
 
 export default styled(FieldCheckbox)`
diff --git a/lib/components/molecules/Form/FieldInput/FieldInput.js b/lib/components/molecules/Form/FieldInput/FieldInput.js
index 700a59187..d23cc5b07 100755
--- a/lib/components/molecules/Form/FieldInput/FieldInput.js
+++ b/lib/components/molecules/Form/FieldInput/FieldInput.js
@@ -18,6 +18,8 @@ type Props = {
   fieldProps?: Object,
   value?: string | number,
   placeholder?: string,
+  onChange?: Function,
+  onBlur?: Function,
 };
 
 const FieldInput = ({
@@ -26,6 +28,8 @@ const FieldInput = ({
   type,
   name,
   label,
+  onChange,
+  onBlur,
   labelProps,
   fieldProps,
   ...others
@@ -39,7 +43,24 @@ const FieldInput = ({
       id={id}
       name={name}
       type={type}
-      render={({ field }) => <Input type={type} {...others} {...field} />}
+      render={({ field, form }) => {
+        const { handleChange, handleBlur } = form;
+        return (
+          <Input
+            type={type}
+            {...others}
+            {...field}
+            onChange={e => {
+              handleChange(e);
+              if (typeof onChange === 'function') onChange(e, form);
+            }}
+            onBlur={e => {
+              handleBlur(e);
+              if (typeof onBlur === 'function') onBlur(e, form);
+            }}
+          />
+        );
+      }}
       {...fieldProps}
     />
     <ErrorMessage name={name} component={FieldError} />
@@ -53,6 +74,8 @@ FieldInput.defaultProps = {
   labelProps: {},
   value: '',
   fieldProps: {},
+  onChange: null,
+  onBlur: null,
 };
 
 export default styled(FieldInput)`
diff --git a/lib/components/molecules/Form/FieldRadioGroup/FieldRadioGroup.js b/lib/components/molecules/Form/FieldRadioGroup/FieldRadioGroup.js
index df0bd1878..f7a28f43f 100644
--- a/lib/components/molecules/Form/FieldRadioGroup/FieldRadioGroup.js
+++ b/lib/components/molecules/Form/FieldRadioGroup/FieldRadioGroup.js
@@ -9,6 +9,7 @@ import styles from './FieldRadioGroup.style';
 
 type radioGroupProps = {
   id: string,
+  onChange?: Function,
 };
 
 type Props = {
@@ -27,14 +28,22 @@ const FieldRadioGroup = ({ id, className, name, radioGroupArray, ...others }: Pr
           <Field
             key={radioGroup.id || `${name}_${index}`}
             name={name}
-            render={({ field }) => (
-              <InputChoice
-                type="radio"
-                id={radioGroup.id || `${name}_${index}`}
-                {...field}
-                {...radioGroup}
-              />
-            )}
+            render={({ field, form }) => {
+              const { handleChange } = form;
+              const { onChange } = radioGroup;
+              return (
+                <InputChoice
+                  type="radio"
+                  id={radioGroup.id || `${name}_${index}`}
+                  onChange={e => {
+                    handleChange(e);
+                    if (typeof onChange === 'function') onChange(e, form);
+                  }}
+                  {...field}
+                  {...radioGroup}
+                />
+              );
+            }}
           />
         ))}
         <ErrorMessage name={name} component={FieldError} />
diff --git a/lib/components/molecules/Form/FieldSelect/FieldSelect.js b/lib/components/molecules/Form/FieldSelect/FieldSelect.js
index f428ae973..d47d94f6a 100644
--- a/lib/components/molecules/Form/FieldSelect/FieldSelect.js
+++ b/lib/components/molecules/Form/FieldSelect/FieldSelect.js
@@ -15,6 +15,7 @@ type Props = {
   label: Node,
   labelProps?: Object,
   fieldProps?: Object,
+  onChange?: Function,
 };
 
 const FieldSelect = ({
@@ -22,6 +23,7 @@ const FieldSelect = ({
   className,
   name,
   label,
+  onChange,
   labelProps,
   fieldProps,
   ...others
@@ -33,7 +35,19 @@ const FieldSelect = ({
     <Field
       name={name}
       component="select"
-      render={({ field }) => <Select {...others} {...field} />}
+      render={({ field, form }) => {
+        const { handleChange } = form;
+        return (
+          <Select
+            {...others}
+            {...field}
+            onChange={e => {
+              handleChange(e);
+              if (typeof onChange === 'function') onChange(e, form);
+            }}
+          />
+        );
+      }}
       {...fieldProps}
     />
     <ErrorMessage name={name} component={FieldError} />
@@ -43,6 +57,7 @@ const FieldSelect = ({
 FieldSelect.defaultProps = {
   labelProps: {},
   fieldProps: {},
+  onChange: null,
 };
 
 export default styled(FieldSelect)`
diff --git a/lib/components/molecules/Form/FieldTextarea/FieldTextarea.js b/lib/components/molecules/Form/FieldTextarea/FieldTextarea.js
index 101528cef..5b275063e 100644
--- a/lib/components/molecules/Form/FieldTextarea/FieldTextarea.js
+++ b/lib/components/molecules/Form/FieldTextarea/FieldTextarea.js
@@ -17,6 +17,7 @@ type Props = {
     className?: string,
   },
   value?: string,
+  onChange?: string,
 };
 
 const FieldTextarea = ({
@@ -24,6 +25,7 @@ const FieldTextarea = ({
   className,
   type,
   name,
+  onChange,
   label,
   labelProps,
   ...others
@@ -32,7 +34,23 @@ const FieldTextarea = ({
     <Label htmlFor={id} {...labelProps}>
       {label}
     </Label>
-    <Field id={id} name={name} render={({ field }) => <Textarea {...others} {...field} />} />
+    <Field
+      id={id}
+      name={name}
+      render={({ field, form }) => {
+        const { handleChange } = form;
+        return (
+          <Textarea
+            {...others}
+            {...field}
+            onChange={e => {
+              handleChange(e);
+              if (typeof onChange === 'function') onChange(e, form);
+            }}
+          />
+        );
+      }}
+    />
     <ErrorMessage name={name} component={FieldError} />
   </div>
 );
@@ -41,6 +59,7 @@ FieldTextarea.defaultProps = {
   className: '',
   labelProps: {},
   value: '',
+  onChange: null,
 };
 
 export default styled(FieldTextarea)`

From 24af8c7287593424f6e43c95ff2604622ba57acf Mon Sep 17 00:00:00 2001
From: Ankur Kakroo <akakroo@sapient.com>
Date: Fri, 15 Mar 2019 10:30:08 +0530
Subject: [PATCH 2/2] Update snapshot

---
 .../tests/__snapshots__/FieldInput.style.test.js.snap      | 2 ++
 .../tests/__snapshots__/FieldSelect.style.test.js.snap     | 1 +
 .../tests/__snapshots__/FieldTextarea.style.test.js.snap   | 1 +
 .../molecules/Form/tests/__snapshots__/Form.test.js.snap   | 7 +++++++
 4 files changed, 11 insertions(+)

diff --git a/lib/components/molecules/Form/FieldInput/tests/__snapshots__/FieldInput.style.test.js.snap b/lib/components/molecules/Form/FieldInput/tests/__snapshots__/FieldInput.style.test.js.snap
index a07881da5..4163497af 100644
--- a/lib/components/molecules/Form/FieldInput/tests/__snapshots__/FieldInput.style.test.js.snap
+++ b/lib/components/molecules/Form/FieldInput/tests/__snapshots__/FieldInput.style.test.js.snap
@@ -18,6 +18,8 @@ exports[`FieldInput should render correctly 1`] = `
   className="c0"
   fieldProps={Object {}}
   labelProps={Object {}}
+  onBlur={null}
+  onChange={null}
   placeholder=""
   type="text"
   value=""
diff --git a/lib/components/molecules/Form/FieldSelect/tests/__snapshots__/FieldSelect.style.test.js.snap b/lib/components/molecules/Form/FieldSelect/tests/__snapshots__/FieldSelect.style.test.js.snap
index 46b1e5599..a1b81e2a4 100644
--- a/lib/components/molecules/Form/FieldSelect/tests/__snapshots__/FieldSelect.style.test.js.snap
+++ b/lib/components/molecules/Form/FieldSelect/tests/__snapshots__/FieldSelect.style.test.js.snap
@@ -14,5 +14,6 @@ exports[`FieldSelect should render correctly 1`] = `
   className="c0"
   fieldProps={Object {}}
   labelProps={Object {}}
+  onChange={null}
 />
 `;
diff --git a/lib/components/molecules/Form/FieldTextarea/tests/__snapshots__/FieldTextarea.style.test.js.snap b/lib/components/molecules/Form/FieldTextarea/tests/__snapshots__/FieldTextarea.style.test.js.snap
index ba018bd34..c3b1e3981 100644
--- a/lib/components/molecules/Form/FieldTextarea/tests/__snapshots__/FieldTextarea.style.test.js.snap
+++ b/lib/components/molecules/Form/FieldTextarea/tests/__snapshots__/FieldTextarea.style.test.js.snap
@@ -13,6 +13,7 @@ exports[`FieldTextarea should render correctly 1`] = `
 <FieldTextarea
   className="c0"
   labelProps={Object {}}
+  onChange={null}
   value=""
 />
 `;
diff --git a/lib/components/molecules/Form/tests/__snapshots__/Form.test.js.snap b/lib/components/molecules/Form/tests/__snapshots__/Form.test.js.snap
index 48da23f77..74fc90add 100644
--- a/lib/components/molecules/Form/tests/__snapshots__/Form.test.js.snap
+++ b/lib/components/molecules/Form/tests/__snapshots__/Form.test.js.snap
@@ -103,6 +103,8 @@ exports[`Form Component should render input field with no validation 1`] = `
                 label="User Name"
                 labelProps={Object {}}
                 name="username"
+                onBlur={null}
+                onChange={null}
                 placeholder=""
                 type="text"
                 value=""
@@ -669,6 +671,8 @@ exports[`Form Component should render input field with yupValidationSchema 1`] =
                 label="User Name"
                 labelProps={Object {}}
                 name="username"
+                onBlur={null}
+                onChange={null}
                 placeholder=""
                 type="text"
                 value=""
@@ -1360,6 +1364,8 @@ exports[`Form Component should render input text field 1`] = `
                 label="User Name"
                 labelProps={Object {}}
                 name="username"
+                onBlur={null}
+                onChange={null}
                 placeholder=""
                 type="text"
                 value=""
@@ -2120,6 +2126,7 @@ exports[`Form Component should render select field 1`] = `
                 label="Type of user"
                 labelProps={Object {}}
                 name="typeOfUser"
+                onChange={null}
                 options={
                   Array [
                     "Admin",