diff --git a/frontend/src/routes/sponsor/guest/guestInfo/index.tsx b/frontend/src/routes/sponsor/guest/guestInfo/index.tsx index 542e2fe837463cf6ad357d3e5c89466440fe7a17..ca21d846a3f79fed3f7df01c4cb9cf4f435ec73c 100644 --- a/frontend/src/routes/sponsor/guest/guestInfo/index.tsx +++ b/frontend/src/routes/sponsor/guest/guestInfo/index.tsx @@ -22,7 +22,7 @@ import { import { Guest } from 'interfaces' import SponsorInfoButtons from 'routes/components/sponsorInfoButtons' import { useEffect, useState } from 'react' -import { SubmitHandler, useForm } from 'react-hook-form' +import { SubmitHandler, useForm, Controller } from 'react-hook-form' import IdentityLine from 'components/identityLine' import { isValidEmail, submitJsonOpts } from 'utils' @@ -93,13 +93,19 @@ export default function GuestInfo({ const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false) const [emailDirty, setEmailDirty] = useState(false) + const defaultValues = { + email: guest.email, + } // Using useForm even though only the e-mail is allow to change at present, since useForm makes setup and validation easier const { - register, handleSubmit, setValue, + control, formState: { errors }, - } = useForm<Email>({ mode: 'onChange' }) + } = useForm({ + mode: 'onChange', + defaultValues, + }) useEffect(() => { setValue('email', guest.email) @@ -150,6 +156,7 @@ export default function GuestInfo({ } const emailFieldChange = (event: any) => { + setValue('email', event.target.value) if (event.target.value !== guest.email) { setEmailDirty(true) } else { @@ -188,14 +195,23 @@ export default function GuestInfo({ justifyContent: 'flex-start', }} > - <TextField - id="email" - error={!!errors.email} - helperText={errors.email && errors.email.message} - {...register(`email`, { + <Controller + name="email" + control={control} + rules={{ validate: isValidEmail, - })} - onChange={emailFieldChange} + }} + render={({ field: { value }, ...rest }) => ( + <TextField + id="email" + label={t('input.email')} + error={!!errors.email} + helperText={errors.email && errors.email.message} + value={value} + {...rest} + onChange={emailFieldChange} + /> + )} /> {/* If the guest has not completed the registration process, he should have an invitation he has not responded to */}