From fb3c0f65673b8493eb70c0854cbf63d54b3ec222 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 31 Oct 2023 23:10:15 +0100 Subject: [PATCH 01/14] Add FormProvider in ACHContractStep --- src/pages/ReimbursementAccount/ACHContractStep.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js index 8f2d2e07998e..1f9996a4424c 100644 --- a/src/pages/ReimbursementAccount/ACHContractStep.js +++ b/src/pages/ReimbursementAccount/ACHContractStep.js @@ -5,7 +5,6 @@ import React, {useState} from 'react'; import {View} from 'react-native'; import _ from 'underscore'; import CheckboxWithLabel from '@components/CheckboxWithLabel'; -import Form from '@components/Form'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; @@ -19,6 +18,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import IdentityForm from './IdentityForm'; import StepPropTypes from './StepPropTypes'; +import FormProvider from '@components/Form/FormProvider'; const propTypes = { ...StepPropTypes, @@ -156,7 +156,7 @@ function ACHContractStep(props) { shouldShowGetAssistanceButton guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT} /> -
)} -
+ ); } From 517699fbee54e9199bc8cc0f75563e7406457b67 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 31 Oct 2023 23:12:24 +0100 Subject: [PATCH 02/14] Add FormProvider in IdentityForm --- src/pages/ReimbursementAccount/IdentityForm.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js index 7cd66f3ba086..7136514b9c2b 100644 --- a/src/pages/ReimbursementAccount/IdentityForm.js +++ b/src/pages/ReimbursementAccount/IdentityForm.js @@ -3,11 +3,12 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; import _ from 'underscore'; -import DatePicker from '@components/DatePicker'; import TextInput from '@components/TextInput'; import styles from '@styles/styles'; import CONST from '@src/CONST'; import AddressForm from './AddressForm'; +import InputWrapper from '@components/Form/InputWrapper'; +import NewDatePicker from '@components/NewDatePicker'; const propTypes = { /** Style for wrapping View */ @@ -141,7 +142,8 @@ function IdentityForm(props) { - - - - Date: Tue, 31 Oct 2023 23:13:17 +0100 Subject: [PATCH 03/14] fix prettier --- src/pages/ReimbursementAccount/ACHContractStep.js | 2 +- src/pages/ReimbursementAccount/IdentityForm.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js index 1f9996a4424c..08ca9c74bf10 100644 --- a/src/pages/ReimbursementAccount/ACHContractStep.js +++ b/src/pages/ReimbursementAccount/ACHContractStep.js @@ -5,6 +5,7 @@ import React, {useState} from 'react'; import {View} from 'react-native'; import _ from 'underscore'; import CheckboxWithLabel from '@components/CheckboxWithLabel'; +import FormProvider from '@components/Form/FormProvider'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; @@ -18,7 +19,6 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import IdentityForm from './IdentityForm'; import StepPropTypes from './StepPropTypes'; -import FormProvider from '@components/Form/FormProvider'; const propTypes = { ...StepPropTypes, diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js index 7136514b9c2b..38971cdf97d3 100644 --- a/src/pages/ReimbursementAccount/IdentityForm.js +++ b/src/pages/ReimbursementAccount/IdentityForm.js @@ -3,12 +3,12 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; import _ from 'underscore'; +import InputWrapper from '@components/Form/InputWrapper'; +import NewDatePicker from '@components/NewDatePicker'; import TextInput from '@components/TextInput'; import styles from '@styles/styles'; import CONST from '@src/CONST'; import AddressForm from './AddressForm'; -import InputWrapper from '@components/Form/InputWrapper'; -import NewDatePicker from '@components/NewDatePicker'; const propTypes = { /** Style for wrapping View */ From 2211d44224ef991432e4990854d0c84c881c4bdd Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 9 Nov 2023 00:32:32 +0100 Subject: [PATCH 04/14] add input wrappers around checkboxes --- src/pages/ReimbursementAccount/ACHContractStep.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js index 08ca9c74bf10..1853a2f4e7a6 100644 --- a/src/pages/ReimbursementAccount/ACHContractStep.js +++ b/src/pages/ReimbursementAccount/ACHContractStep.js @@ -19,6 +19,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import IdentityForm from './IdentityForm'; import StepPropTypes from './StepPropTypes'; +import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { ...StepPropTypes, @@ -168,7 +169,8 @@ function ACHContractStep(props) { {props.translate('beneficialOwnersStep.checkAllThatApply')} - - )} {props.translate('beneficialOwnersStep.agreement')} - - Date: Thu, 9 Nov 2023 00:33:09 +0100 Subject: [PATCH 05/14] fix prettier --- src/pages/ReimbursementAccount/ACHContractStep.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js index 1853a2f4e7a6..8543dfdba5b3 100644 --- a/src/pages/ReimbursementAccount/ACHContractStep.js +++ b/src/pages/ReimbursementAccount/ACHContractStep.js @@ -6,6 +6,7 @@ import {View} from 'react-native'; import _ from 'underscore'; import CheckboxWithLabel from '@components/CheckboxWithLabel'; import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; @@ -19,7 +20,6 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import IdentityForm from './IdentityForm'; import StepPropTypes from './StepPropTypes'; -import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { ...StepPropTypes, From c4aa84c725bf9670ffc92e74f16a556ebb7b8bc3 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 9 Nov 2023 15:35:53 +0100 Subject: [PATCH 06/14] Add FormProvider in required other steps --- .../EnablePayments/AdditionalDetailsStep.js | 23 ++++++++----- src/pages/ReimbursementAccount/AddressForm.js | 13 ++++--- src/pages/ReimbursementAccount/CompanyStep.js | 34 ++++++++++++------- .../ReimbursementAccount/RequestorStep.js | 9 +++-- 4 files changed, 50 insertions(+), 29 deletions(-) diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js index e58d45b5f1c4..d955f8cdbfa3 100644 --- a/src/pages/EnablePayments/AdditionalDetailsStep.js +++ b/src/pages/EnablePayments/AdditionalDetailsStep.js @@ -5,8 +5,7 @@ import React from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; -import DatePicker from '@components/DatePicker'; -import Form from '@components/Form'; +import NewDatePicker from '@components/NewDatePicker'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; @@ -23,6 +22,8 @@ import * as Wallet from '@userActions/Wallet'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import IdologyQuestions from './IdologyQuestions'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { ...withLocalizePropTypes, @@ -177,7 +178,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP {translate('additionalDetailsStep.helpLink')} -
- - - - - - + ); diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js index 260418b9f50b..b7ead9ac1561 100644 --- a/src/pages/ReimbursementAccount/AddressForm.js +++ b/src/pages/ReimbursementAccount/AddressForm.js @@ -6,6 +6,7 @@ import StatePicker from '@components/StatePicker'; import TextInput from '@components/TextInput'; import styles from '@styles/styles'; import CONST from '@src/CONST'; +import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { /** Translate key for Street name */ @@ -95,7 +96,8 @@ function AddressForm(props) { return ( <> - - - - -
{translate('companyStep.subtitle')} - - - - - ({value: key, label: translate(`companyStep.incorporationTypes.${key}`)}))} @@ -234,7 +240,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul /> - - - ( @@ -268,7 +276,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul style={[styles.mt4]} shouldSaveDraft /> - + ); } diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 0eddb727d56d..2d8cd8f7b886 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -17,6 +17,8 @@ import ONYXKEYS from '@src/ONYXKEYS'; import IdentityForm from './IdentityForm'; import {reimbursementAccountPropTypes} from './reimbursementAccountPropTypes'; import RequestorOnfidoStep from './RequestorOnfidoStep'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { onBackButtonPress: PropTypes.func.isRequired, @@ -126,7 +128,7 @@ function RequestorStep({reimbursementAccount, shouldShowOnfido, onBackButtonPres onBackButtonPress={onBackButtonPress} shouldShowGetAssistanceButton /> -
- - + ); } From 42f5e59bc974c152ce22946f4b0d925105bb155c Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 9 Nov 2023 15:36:43 +0100 Subject: [PATCH 07/14] fix prettier --- src/pages/EnablePayments/AdditionalDetailsStep.js | 6 +++--- src/pages/ReimbursementAccount/AddressForm.js | 2 +- src/pages/ReimbursementAccount/CompanyStep.js | 6 +++--- src/pages/ReimbursementAccount/RequestorStep.js | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js index d955f8cdbfa3..20e7b13096f0 100644 --- a/src/pages/EnablePayments/AdditionalDetailsStep.js +++ b/src/pages/EnablePayments/AdditionalDetailsStep.js @@ -5,8 +5,10 @@ import React from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; -import NewDatePicker from '@components/NewDatePicker'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import NewDatePicker from '@components/NewDatePicker'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; @@ -22,8 +24,6 @@ import * as Wallet from '@userActions/Wallet'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import IdologyQuestions from './IdologyQuestions'; -import FormProvider from '@components/Form/FormProvider'; -import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { ...withLocalizePropTypes, diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js index b7ead9ac1561..d48295b4786d 100644 --- a/src/pages/ReimbursementAccount/AddressForm.js +++ b/src/pages/ReimbursementAccount/AddressForm.js @@ -2,11 +2,11 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; import AddressSearch from '@components/AddressSearch'; +import InputWrapper from '@components/Form/InputWrapper'; import StatePicker from '@components/StatePicker'; import TextInput from '@components/TextInput'; import styles from '@styles/styles'; import CONST from '@src/CONST'; -import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { /** Translate key for Street name */ diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index dc4463b6b7cc..7a472f080f82 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -7,8 +7,10 @@ import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import CheckboxWithLabel from '@components/CheckboxWithLabel'; -import NewDatePicker from '@components/NewDatePicker'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import NewDatePicker from '@components/NewDatePicker'; import Picker from '@components/Picker'; import ScreenWrapper from '@components/ScreenWrapper'; import StatePicker from '@components/StatePicker'; @@ -24,8 +26,6 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import AddressForm from './AddressForm'; import StepPropTypes from './StepPropTypes'; -import FormProvider from '@components/Form/FormProvider'; -import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { ...StepPropTypes, diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 2d8cd8f7b886..1586cbb9ab18 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -4,6 +4,8 @@ import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import CheckboxWithLabel from '@components/CheckboxWithLabel'; import Form from '@components/Form'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; @@ -17,8 +19,6 @@ import ONYXKEYS from '@src/ONYXKEYS'; import IdentityForm from './IdentityForm'; import {reimbursementAccountPropTypes} from './reimbursementAccountPropTypes'; import RequestorOnfidoStep from './RequestorOnfidoStep'; -import FormProvider from '@components/Form/FormProvider'; -import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { onBackButtonPress: PropTypes.func.isRequired, From 60a04c8a34ae238388dc22e8558af0c341a71a14 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 9 Nov 2023 15:37:20 +0100 Subject: [PATCH 08/14] remove unused imports --- src/pages/ReimbursementAccount/RequestorStep.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 1586cbb9ab18..2b78eeee84ae 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import CheckboxWithLabel from '@components/CheckboxWithLabel'; -import Form from '@components/Form'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; From c42ff325838215ab173812e23ed27502c74877e5 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 9 Nov 2023 17:39:07 +0100 Subject: [PATCH 09/14] pass inputValues through children in FormProvider --- src/components/Form/FormProvider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js index 92baa9727832..e06965062262 100644 --- a/src/components/Form/FormProvider.js +++ b/src/components/Form/FormProvider.js @@ -320,7 +320,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC errors={errors} enabledWhenOffline={enabledWhenOffline} > - {children} + {_.isFunction(children) ? children({inputValues}) : children} ); From 87ff9ba9d12d893274b9f886ecda9d055b3421de Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 9 Nov 2023 18:26:58 +0100 Subject: [PATCH 10/14] fix CheckboxWithLabel typing errors --- src/components/CheckboxWithLabel.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js index 86dba1d2a932..3d467b6372d2 100644 --- a/src/components/CheckboxWithLabel.js +++ b/src/components/CheckboxWithLabel.js @@ -7,6 +7,7 @@ import variables from '@styles/variables'; import Checkbox from './Checkbox'; import FormHelpMessage from './FormHelpMessage'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; +import refPropTypes from './refPropTypes'; import Text from './Text'; /** @@ -54,7 +55,7 @@ const propTypes = { defaultValue: PropTypes.bool, /** React ref being forwarded to the Checkbox input */ - forwardedRef: PropTypes.func, + forwardedRef: refPropTypes, /** The ID used to uniquely identify the input in a Form */ /* eslint-disable-next-line react/no-unused-prop-types */ From cc981320a96ed2819efbe3071617d054c5693925 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Mon, 20 Nov 2023 10:39:37 +0100 Subject: [PATCH 11/14] fix saving draft values --- src/components/Form/FormProvider.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js index e06965062262..4069112581d2 100644 --- a/src/components/Form/FormProvider.js +++ b/src/components/Form/FormProvider.js @@ -46,6 +46,9 @@ const propTypes = { errorFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)), }), + /** Contains draft values for each input in the form */ + draftValues: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number, PropTypes.objectOf(Date)])), + /** Should the button be enabled when offline */ enabledWhenOffline: PropTypes.bool, @@ -76,6 +79,7 @@ const defaultProps = { formState: { isLoading: false, }, + draftValues: {}, enabledWhenOffline: false, isSubmitActionDangerous: false, scrollContextEnabled: false, @@ -99,7 +103,7 @@ function getInitialValueByType(valueType) { } } -function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnChange, children, formState, network, enabledWhenOffline, onSubmit, ...rest}) { +function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnChange, children, formState, network, enabledWhenOffline, draftValues, onSubmit, ...rest}) { const inputRefs = useRef({}); const touchedInputs = useRef({}); const [inputValues, setInputValues] = useState({}); @@ -211,6 +215,8 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC if (!_.isUndefined(propsToParse.value)) { inputValues[inputID] = propsToParse.value; + } else if(propsToParse.shouldSaveDraft && draftValues[inputID] !== undefined && inputValues[inputID] === undefined) { + inputValues[inputID] = draftValues[inputID]; } else if (propsToParse.shouldUseDefaultValue) { // We force the form to set the input value from the defaultValue props if there is a saved valid value inputValues[inputID] = propsToParse.defaultValue; @@ -305,7 +311,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC }, }; }, - [errors, formState, hasServerError, inputValues, onValidate, setTouchedInput, shouldValidateOnBlur, shouldValidateOnChange], + [draftValues, errors, formState, hasServerError, inputValues, onValidate, setTouchedInput, shouldValidateOnBlur, shouldValidateOnChange], ); const value = useMemo(() => ({registerInput}), [registerInput]); @@ -336,5 +342,8 @@ export default compose( formState: { key: (props) => props.formID, }, + draftValues: { + key: (props) => `${props.formID}Draft`, + }, }), )(FormProvider); From 2c13adb907b841fb9f8cb02fd37efb6385978824 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Mon, 20 Nov 2023 10:40:45 +0100 Subject: [PATCH 12/14] fix prettier --- src/components/Form/FormProvider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js index 4069112581d2..41c6ad6e0fa2 100644 --- a/src/components/Form/FormProvider.js +++ b/src/components/Form/FormProvider.js @@ -215,7 +215,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC if (!_.isUndefined(propsToParse.value)) { inputValues[inputID] = propsToParse.value; - } else if(propsToParse.shouldSaveDraft && draftValues[inputID] !== undefined && inputValues[inputID] === undefined) { + } else if (propsToParse.shouldSaveDraft && draftValues[inputID] !== undefined && inputValues[inputID] === undefined) { inputValues[inputID] = draftValues[inputID]; } else if (propsToParse.shouldUseDefaultValue) { // We force the form to set the input value from the defaultValue props if there is a saved valid value From 9f358c055b1b84a032e7c2bd6ea8356b88cdf930 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Mon, 20 Nov 2023 13:28:59 +0100 Subject: [PATCH 13/14] fix draft saving --- src/components/Form/FormProvider.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js index 053ce9b59b1a..739363552e1c 100644 --- a/src/components/Form/FormProvider.js +++ b/src/components/Form/FormProvider.js @@ -212,9 +212,9 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC if (!_.isUndefined(propsToParse.value)) { inputValues[inputID] = propsToParse.value; - } else if (propsToParse.shouldSaveDraft && draftValues[inputID] !== undefined && inputValues[inputID] === undefined) { + } else if (propsToParse.shouldSaveDraft && !_.isUndefined(draftValues[inputID]) && _.isUndefined(inputValues[inputID])) { inputValues[inputID] = draftValues[inputID]; - } else if (propsToParse.shouldUseDefaultValue) { + } else if (propsToParse.shouldUseDefaultValue && _.isUndefined(inputValues[inputID])) { // We force the form to set the input value from the defaultValue props if there is a saved valid value inputValues[inputID] = propsToParse.defaultValue; } else if (_.isUndefined(inputValues[inputID])) { @@ -306,7 +306,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC }); if (propsToParse.shouldSaveDraft) { - FormActions.setDraftValues(propsToParse.formID, {[inputKey]: value}); + FormActions.setDraftValues(formID, {[inputKey]: value}); } if (_.isFunction(propsToParse.onValueChange)) { From 16247e72a75705bc3ea76e16672a51cc2cd70978 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Mon, 20 Nov 2023 13:31:23 +0100 Subject: [PATCH 14/14] fix lint errors --- src/components/Form/FormProvider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js index 739363552e1c..27d8a2e2f406 100644 --- a/src/components/Form/FormProvider.js +++ b/src/components/Form/FormProvider.js @@ -315,7 +315,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC }, }; }, - [draftValues, errors, formState, hasServerError, inputValues, onValidate, setTouchedInput, shouldValidateOnBlur, shouldValidateOnChange], + [draftValues, formID, errors, formState, hasServerError, inputValues, onValidate, setTouchedInput, shouldValidateOnBlur, shouldValidateOnChange], ); const value = useMemo(() => ({registerInput}), [registerInput]);