From d5333411c6220e4d9249142956417ed33f2ed6f3 Mon Sep 17 00:00:00 2001 From: David B Date: Mon, 12 Nov 2018 15:03:29 +0100 Subject: [PATCH 1/2] update only if i'm the touched item --- src/FastField.tsx | 28 +++++++++++++++------------- src/Formik.tsx | 4 ++++ src/types.tsx | 2 ++ 3 files changed, 21 insertions(+), 13 deletions(-) diff --git a/src/FastField.tsx b/src/FastField.tsx index 2f1595c5d..03dcfa774 100644 --- a/src/FastField.tsx +++ b/src/FastField.tsx @@ -110,20 +110,22 @@ class FastFieldInner extends React.Component< ) { if (this.props.shouldUpdate) { return this.props.shouldUpdate(props, this.props); - } else if ( - getIn(this.props.formik.values, this.props.name) !== - getIn(props.formik.values, this.props.name) || - getIn(this.props.formik.errors, this.props.name) !== - getIn(props.formik.errors, this.props.name) || - getIn(this.props.formik.touched, this.props.name) !== - getIn(props.formik.touched, this.props.name) || - Object.keys(this.props).length !== Object.keys(props).length || - this.props.formik.isSubmitting !== props.formik.isSubmitting - ) { - return true; - } else { - return false; } + if (props.formik.lastTouched === this.props.name) { + if ( + this.props.formik.isSubmitting !== props.formik.isSubmitting || + Object.keys(this.props).length !== Object.keys(props).length || + getIn(this.props.formik.values, this.props.name) !== + getIn(props.formik.values, this.props.name) || + getIn(this.props.formik.errors, this.props.name) !== + getIn(props.formik.errors, this.props.name) || + getIn(this.props.formik.touched, this.props.name) !== + getIn(props.formik.touched, this.props.name) + ) { + return true; + } + } + return false; } componentDidMount() { diff --git a/src/Formik.tsx b/src/Formik.tsx index ddcb1b6d8..e5ce080b9 100755 --- a/src/Formik.tsx +++ b/src/Formik.tsx @@ -329,6 +329,7 @@ export class Formik extends React.Component< prevState => ({ ...prevState, values: setIn(prevState.values, field!, val), + lastTouched: field, }), () => { if (this.props.validateOnChange) { @@ -454,6 +455,7 @@ export class Formik extends React.Component< this.setState(prevState => ({ touched: setIn(prevState.touched, field, true), + lastTouched: field, })); if (this.props.validateOnBlur) { @@ -482,6 +484,7 @@ export class Formik extends React.Component< prevState => ({ ...prevState, touched: setIn(prevState.touched, field, touched), + lastTouched: field, }), () => { if (this.props.validateOnBlur && shouldValidate) { @@ -509,6 +512,7 @@ export class Formik extends React.Component< isValidating: false, errors: {}, touched: {}, + lastTouched: undefined, error: undefined, status: undefined, values, diff --git a/src/types.tsx b/src/types.tsx index e21c2fa53..5ab72d17d 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -40,6 +40,8 @@ export interface FormikState { errors: FormikErrors; /** map of field names to whether the field has been touched */ touched: FormikTouched; + /** Name of the field which trigger the last update event */ + lastTouched?: string; /** whether the form is currently validating */ isValidating: boolean; /** whether the form is currently submitting */ From 86dcc6c64d1771c1a7a74bd260a370dd7a6ec762 Mon Sep 17 00:00:00 2001 From: David B Date: Mon, 12 Nov 2018 15:20:45 +0100 Subject: [PATCH 2/2] refacto condition in fastfields --- src/FastField.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/FastField.tsx b/src/FastField.tsx index 03dcfa774..9ab0e0d68 100644 --- a/src/FastField.tsx +++ b/src/FastField.tsx @@ -111,21 +111,17 @@ class FastFieldInner extends React.Component< if (this.props.shouldUpdate) { return this.props.shouldUpdate(props, this.props); } - if (props.formik.lastTouched === this.props.name) { - if ( - this.props.formik.isSubmitting !== props.formik.isSubmitting || + return ( + props.formik.lastTouched === this.props.name && + (this.props.formik.isSubmitting !== props.formik.isSubmitting || Object.keys(this.props).length !== Object.keys(props).length || getIn(this.props.formik.values, this.props.name) !== getIn(props.formik.values, this.props.name) || getIn(this.props.formik.errors, this.props.name) !== getIn(props.formik.errors, this.props.name) || getIn(this.props.formik.touched, this.props.name) !== - getIn(props.formik.touched, this.props.name) - ) { - return true; - } - } - return false; + getIn(props.formik.touched, this.props.name)) + ); } componentDidMount() {