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 => (
}
+ render={({ field, form }) => {
+ const { handleChange } = form;
+ return (
+ {
+ handleChange(e);
+ if (typeof onChange === 'function') onChange(e, form);
+ }}
+ />
+ );
+ }}
/>
@@ -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 }) => }
+ render={({ field, form }) => {
+ const { handleChange, handleBlur } = form;
+ return (
+ {
+ handleChange(e);
+ if (typeof onChange === 'function') onChange(e, form);
+ }}
+ onBlur={e => {
+ handleBlur(e);
+ if (typeof onBlur === 'function') onBlur(e, form);
+ }}
+ />
+ );
+ }}
{...fieldProps}
/>
@@ -53,6 +74,8 @@ FieldInput.defaultProps = {
labelProps: {},
value: '',
fieldProps: {},
+ onChange: null,
+ onBlur: null,
};
export default styled(FieldInput)`
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/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
(
-
- )}
+ render={({ field, form }) => {
+ const { handleChange } = form;
+ const { onChange } = radioGroup;
+ return (
+ {
+ handleChange(e);
+ if (typeof onChange === 'function') onChange(e, form);
+ }}
+ {...field}
+ {...radioGroup}
+ />
+ );
+ }}
/>
))}
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 = ({
}
+ render={({ field, form }) => {
+ const { handleChange } = form;
+ return (
+