diff --git a/frontend/src/routes/guest/register/steps/register.tsx b/frontend/src/routes/guest/register/steps/register.tsx index 6688df1a3b3855ad57c30b592a4c22a7a9c1653c..6b3b195df385ec1bbe90439e259dfda9f79dfe83 100644 --- a/frontend/src/routes/guest/register/steps/register.tsx +++ b/frontend/src/routes/guest/register/steps/register.tsx @@ -57,13 +57,12 @@ const GuestRegisterStep = forwardRef( const { i18n, t } = useTranslation(['common']) const { nextHandler, initialGuestData, registerData } = props const { showGenderFieldForGuest } = useContext(FeatureContext) + const defaultCountryCode = 'NO' // For select-components it seems to be easier to tie them to a state // and then handle the updating of the form using this, than to tie the // components directly to the form-field using useForm - const [countryCode, setCountryCode] = useState< - CountryCallingCode | undefined - >('NO') + const [countryCode, setCountryCode] = useState<CountryCallingCode>(defaultCountryCode) const [passportNationality, setPassportNationality] = useState< string | undefined >(undefined) @@ -108,6 +107,17 @@ const GuestRegisterStep = forwardRef( } } + if (!registerData || !registerData.mobilePhoneCountry) { + // If there is no country code set in the registered data + // then set the default value. This is necessary even though + // the country code is set in a state variable above, because + // that does not cause the country code to be added to the + // form values by itself. If it was not set here it would be + // blank in the form even though the default value is shown + // in the select menu + setValue('mobilePhoneCountry', defaultCountryCode) + } + const validatePhoneNumber = ( countryCodeCallingCode: CountryCallingCode | undefined, phoneNumberToValidate: string @@ -203,13 +213,12 @@ const GuestRegisterStep = forwardRef( } const handleCountryCodeChange = (event: SelectChangeEvent) => { - if (event.target.value) { - const countryCodeType = event.target.value as CountryCode - setCountryCode(countryCodeType) - setValue('mobilePhoneCountry', countryCodeType) - } else { - setCountryCode(undefined) - } + // There should always be a value in the event since it is + // not possible to select a blank field in the select menu + // for country codes + const countryCodeType = event.target.value as CountryCode + setCountryCode(countryCodeType) + setValue('mobilePhoneCountry', countryCodeType) } const handleMobilePhoneChange = (value: any) => { @@ -506,7 +515,7 @@ const GuestRegisterStep = forwardRef( displayEmpty onChange={handleCountryCodeChange} label={t('input.countryCallingCode')} - value={countryCode ? countryCode.toString() : 'NO'} + value={countryCode ? countryCode.toString() : defaultCountryCode} renderValue={(selected: any) => { if (!selected || selected.length === 0) { return t('input.countryCallingCode')