diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js index 16db54e04077..776aaae688ed 100644 --- a/src/components/Form/FormProvider.js +++ b/src/components/Form/FormProvider.js @@ -47,6 +47,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, @@ -77,6 +80,7 @@ const defaultProps = { formState: { isLoading: false, }, + draftValues: {}, enabledWhenOffline: false, isSubmitActionDangerous: false, scrollContextEnabled: false, @@ -100,7 +104,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({}); @@ -208,7 +212,9 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC if (!_.isUndefined(propsToParse.value)) { inputValues[inputID] = propsToParse.value; - } else if (propsToParse.shouldUseDefaultValue) { + } else if (propsToParse.shouldSaveDraft && !_.isUndefined(draftValues[inputID]) && _.isUndefined(inputValues[inputID])) { + inputValues[inputID] = draftValues[inputID]; + } 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])) { @@ -298,7 +304,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)) { @@ -307,7 +313,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC }, }; }, - [errors, formState, hasServerError, inputValues, onValidate, setTouchedInput, shouldValidateOnBlur, shouldValidateOnChange], + [draftValues, formID, errors, formState, hasServerError, inputValues, onValidate, setTouchedInput, shouldValidateOnBlur, shouldValidateOnChange], ); const value = useMemo(() => ({registerInput}), [registerInput]); @@ -338,5 +344,8 @@ export default compose( formState: { key: (props) => props.formID, }, + draftValues: { + key: (props) => `${props.formID}Draft`, + }, }), )(FormProvider); diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js index b46d3aa0aa28..a953dca378fd 100644 --- a/src/pages/ReimbursementAccount/BankAccountManualStep.js +++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js @@ -3,7 +3,8 @@ import React, {useCallback} from 'react'; import {Image} from 'react-native'; import _ from 'underscore'; 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'; @@ -86,7 +87,7 @@ function BankAccountManualStep(props) { guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT} onBackButtonPress={props.onBackButtonPress} /> -
- - - - + ); }