diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx index 82a8d0870946..8cf6df2fa8f5 100644 --- a/src/components/Form/FormProvider.tsx +++ b/src/components/Form/FormProvider.tsx @@ -1,9 +1,10 @@ import lodashIsEqual from 'lodash/isEqual'; import type {ForwardedRef, MutableRefObject, ReactNode} from 'react'; -import React, {createRef, forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react'; +import React, {createRef, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; import type {NativeSyntheticEvent, StyleProp, TextInputSubmitEditingEventData, ViewStyle} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; +import useLocalize from '@hooks/useLocalize'; import * as ValidationUtils from '@libs/ValidationUtils'; import Visibility from '@libs/Visibility'; import * as FormActions from '@userActions/FormActions'; @@ -90,6 +91,7 @@ function FormProvider( }: FormProviderProps, forwardedRef: ForwardedRef, ) { + const {preferredLocale} = useLocalize(); const inputRefs = useRef({}); const touchedInputs = useRef>({}); const [inputValues, setInputValues] = useState
(() => ({...draftValues})); @@ -157,6 +159,25 @@ function FormProvider( [errors, formID, validate], ); + // When locales change from another session of the same account, + // validate the form in order to update the error translations + useEffect(() => { + // Return since we only have issues with error translations + if (Object.keys(errors).length === 0) { + return; + } + + // Prepare validation values + const trimmedStringValues = ValidationUtils.prepareValues(inputValues); + + // Validate in order to make sure the correct error translations are displayed, + // making sure to not clear server errors if they exist + onValidate(trimmedStringValues, !hasServerError); + + // Only run when locales change + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [preferredLocale]); + /** @param inputID - The inputID of the input being touched */ const setTouchedInput = useCallback( (inputID: keyof Form) => {