From f84e01f31206c4fd3eca0f04613a52ff4eea0a17 Mon Sep 17 00:00:00 2001 From: Nadir Seghir Date: Mon, 9 Aug 2021 14:23:13 +0100 Subject: [PATCH 1/4] run validation again on submit --- .../base/components/text-input/validated-text-input.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/assets/js/base/components/text-input/validated-text-input.tsx b/assets/js/base/components/text-input/validated-text-input.tsx index 82e2ec3d53a..c607c80276d 100644 --- a/assets/js/base/components/text-input/validated-text-input.tsx +++ b/assets/js/base/components/text-input/validated-text-input.tsx @@ -7,6 +7,7 @@ import classnames from 'classnames'; import { ValidationInputError, useValidationContext, + useCheckoutContext, } from '@woocommerce/base-context'; import { withInstanceId } from '@wordpress/compose'; import { isString } from '@woocommerce/types'; @@ -64,6 +65,8 @@ const ValidatedTextInput = ( { getValidationErrorId, } = useValidationContext(); + const { isBeforeProcessing } = useCheckoutContext(); + const textInputId = typeof id !== 'undefined' ? id : 'textinput-' + instanceId; const errorIdString = errorId !== undefined ? errorId : textInputId; @@ -114,6 +117,11 @@ const ValidatedTextInput = ( { } }, [ isPristine, setIsPristine, validateOnMount, validateInput ] ); + useEffect( () => { + if ( isBeforeProcessing ) { + validateInput(); + } + }, [isBeforeProcessing]) // Remove validation errors when unmounted. useEffect( () => { return () => { From ccae990c28a7e644432101333480c8f8cae6262c Mon Sep 17 00:00:00 2001 From: Nadir Seghir Date: Mon, 9 Aug 2021 14:27:16 +0100 Subject: [PATCH 2/4] hook into onCheckoutValidationBeforeProcessing instead --- .../components/text-input/validated-text-input.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/js/base/components/text-input/validated-text-input.tsx b/assets/js/base/components/text-input/validated-text-input.tsx index c607c80276d..49fd1005a4f 100644 --- a/assets/js/base/components/text-input/validated-text-input.tsx +++ b/assets/js/base/components/text-input/validated-text-input.tsx @@ -65,7 +65,7 @@ const ValidatedTextInput = ( { getValidationErrorId, } = useValidationContext(); - const { isBeforeProcessing } = useCheckoutContext(); + const { onCheckoutValidationBeforeProcessing } = useCheckoutContext(); const textInputId = typeof id !== 'undefined' ? id : 'textinput-' + instanceId; @@ -118,10 +118,10 @@ const ValidatedTextInput = ( { }, [ isPristine, setIsPristine, validateOnMount, validateInput ] ); useEffect( () => { - if ( isBeforeProcessing ) { - validateInput(); - } - }, [isBeforeProcessing]) + const unsubscribe = onCheckoutValidationBeforeProcessing( () => validateInput() ); + return unsubscribe; + }, [ onCheckoutValidationBeforeProcessing, validateInput ] ); + // Remove validation errors when unmounted. useEffect( () => { return () => { From f767898b6866126ac98d825dde92f0ad20a84683 Mon Sep 17 00:00:00 2001 From: Nadir Seghir Date: Mon, 9 Aug 2021 14:40:02 +0100 Subject: [PATCH 3/4] back to isBeforeProcessing --- .../components/text-input/validated-text-input.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/js/base/components/text-input/validated-text-input.tsx b/assets/js/base/components/text-input/validated-text-input.tsx index 49fd1005a4f..9ff893c255c 100644 --- a/assets/js/base/components/text-input/validated-text-input.tsx +++ b/assets/js/base/components/text-input/validated-text-input.tsx @@ -65,7 +65,7 @@ const ValidatedTextInput = ( { getValidationErrorId, } = useValidationContext(); - const { onCheckoutValidationBeforeProcessing } = useCheckoutContext(); + const { isBeforeProcessing } = useCheckoutContext(); const textInputId = typeof id !== 'undefined' ? id : 'textinput-' + instanceId; @@ -118,10 +118,10 @@ const ValidatedTextInput = ( { }, [ isPristine, setIsPristine, validateOnMount, validateInput ] ); useEffect( () => { - const unsubscribe = onCheckoutValidationBeforeProcessing( () => validateInput() ); - return unsubscribe; - }, [ onCheckoutValidationBeforeProcessing, validateInput ] ); - + if ( isBeforeProcessing ) { + validateInput(); + } + }, [ isBeforeProcessing, validateInput ] ); // Remove validation errors when unmounted. useEffect( () => { return () => { From 17cd6699b9cc780e7c50b136704627836901091d Mon Sep 17 00:00:00 2001 From: Nadir Seghir Date: Mon, 16 Aug 2021 12:29:02 +0100 Subject: [PATCH 4/4] add todo --- assets/js/base/components/text-input/validated-text-input.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/assets/js/base/components/text-input/validated-text-input.tsx b/assets/js/base/components/text-input/validated-text-input.tsx index 9ff893c255c..f36dd4be148 100644 --- a/assets/js/base/components/text-input/validated-text-input.tsx +++ b/assets/js/base/components/text-input/validated-text-input.tsx @@ -117,6 +117,9 @@ const ValidatedTextInput = ( { } }, [ isPristine, setIsPristine, validateOnMount, validateInput ] ); + /** + * @todo Remove extra validation call after refactoring the validation system. + */ useEffect( () => { if ( isBeforeProcessing ) { validateInput();