From e91c19ecb3be09aab788d07b9bae7b051dfabe3e Mon Sep 17 00:00:00 2001
From: Tore Brede <Tore.Brede@uib.no>
Date: Fri, 6 May 2022 17:36:52 +0200
Subject: [PATCH] GREG-261: Setting default country code in form values
---
.../routes/guest/register/steps/register.tsx | 31 ++++++++++++-------
1 file changed, 20 insertions(+), 11 deletions(-)
diff --git a/frontend/src/routes/guest/register/steps/register.tsx b/frontend/src/routes/guest/register/steps/register.tsx
index 6688df1a..6b3b195d 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')
--
GitLab