diff --git a/packages/berlin/src/pages/Register.tsx b/packages/berlin/src/pages/Register.tsx index ed436c87..79860c85 100644 --- a/packages/berlin/src/pages/Register.tsx +++ b/packages/berlin/src/pages/Register.tsx @@ -21,7 +21,7 @@ import { GetRegistrationResponseType } from '../types/RegistrationType'; import { GetRegistrationDataResponse } from '../types/RegistrationDataType'; import { DBEvent } from '../types/DBEventType'; import { Control, Controller, FieldErrors, UseFormRegister, useForm } from 'react-hook-form'; -import { useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import toast from 'react-hot-toast'; import { RegistrationFieldOption } from '../types/RegistrationFieldOptionType'; import Input from '../components/input'; @@ -89,6 +89,7 @@ function RegisterForm(props: { formState: { errors, isValid }, control, handleSubmit, + getValues, } = useForm({ defaultValues: props.registrationData?.reduce( (acc, curr) => { @@ -100,6 +101,8 @@ function RegisterForm(props: { mode: 'onBlur', }); + const values = getValues(); + const sortedRegistrationFields = useMemo(() => { const sortedFields = [...(props.registrationFields || [])]; @@ -160,6 +163,7 @@ function RegisterForm(props: { type={regField.type} register={register} control={control} + value={values[regField.id] ?? ''} // Current input value /> ))} @@ -182,6 +186,7 @@ function FormField({ register, characterLimit, control, + value, }: { id: string; name: string; @@ -193,6 +198,7 @@ function FormField({ errors: FieldErrors>; characterLimit: number; control: Control, any>; + value: string; }) { switch (type) { case 'TEXT': @@ -205,6 +211,7 @@ function FormField({ disabled={disabled} errors={errors} characterLimit={characterLimit} + value={value} /> ); case 'SELECT': @@ -230,6 +237,7 @@ function FormField({ disabled={disabled} errors={errors} characterLimit={characterLimit} + value={value} /> ); default: @@ -245,9 +253,14 @@ function TextInput(props: { disabled: boolean; register: UseFormRegister>; errors: FieldErrors>; + value: string; }) { const [charCount, setCharCount] = useState(0); + useEffect(() => { + setCharCount(props.value.length); + }, [props.value.length]); + const handleInputChange = (event: React.ChangeEvent) => { const inputValue = event.target.value; setCharCount(inputValue.length); @@ -305,9 +318,14 @@ function TextAreaInput(props: { disabled: boolean; register: UseFormRegister>; errors: FieldErrors>; + value: string; }) { const [charCount, setCharCount] = useState(0); + useEffect(() => { + setCharCount(props.value.length); + }, [props.value.length]); + const handleInputChange = (event: React.ChangeEvent) => { const inputValue = event.target.value; setCharCount(inputValue.length);