diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx index baf19527ccee..c9f2eda94a6b 100644 --- a/src/components/Form/FormProvider.tsx +++ b/src/components/Form/FormProvider.tsx @@ -8,6 +8,7 @@ import {useOnyx} from 'react-native-onyx'; import {useInputBlurContext} from '@components/InputBlurContext'; import useDebounceNonReactive from '@hooks/useDebounceNonReactive'; import useLocalize from '@hooks/useLocalize'; +import usePrevious from '@hooks/usePrevious'; import {isSafari} from '@libs/Browser'; import {prepareValues} from '@libs/ValidationUtils'; import Visibility from '@libs/Visibility'; @@ -18,6 +19,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type {Form} from '@src/types/form'; import type {Errors} from '@src/types/onyx/OnyxCommon'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; +import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue'; import KeyboardUtils from '@src/utils/keyboard'; import type {RegisterInput} from './FormContext'; import FormContext from './FormContext'; @@ -111,11 +113,20 @@ function FormProvider( ) { const [network] = useOnyx(ONYXKEYS.NETWORK, {canBeMissing: true}); const [formState] = useOnyx(`${formID}`, {canBeMissing: true}); - const [draftValues] = useOnyx(`${formID}Draft`, {canBeMissing: true}); + const [draftValues, draftValuesMetadata] = useOnyx(`${formID}Draft`, {canBeMissing: true}); const {preferredLocale, translate} = useLocalize(); const inputRefs = useRef({}); const touchedInputs = useRef>({}); const [inputValues, setInputValues] = useState
(() => ({...draftValues})); + const isLoadingDraftValues = isLoadingOnyxValue(draftValuesMetadata); + const prevIsLoadingDraftValues = usePrevious(isLoadingDraftValues); + + useEffect(() => { + if (isLoadingDraftValues || !prevIsLoadingDraftValues) { + return; + } + setInputValues({...draftValues}); + }, [isLoadingDraftValues, draftValues, prevIsLoadingDraftValues]); const [errors, setErrors] = useState({}); const hasServerError = useMemo(() => !!formState && !isEmptyObject(formState?.errors), [formState]); const {setIsBlurred} = useInputBlurContext();