Merged in feat/SW-3076 (pull request #2416)

feat(SW-3076: change phone country code on country select)

* feat(SW-3076: change phone country code on country select)


Approved-by: Simon.Emanuelsson

apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 import "react-international-phone/style.css"
 
+import { useEffect } from "react"
 import { TextField } from "react-aria-components"
 import { useFormContext, useWatch } from "react-hook-form"
 import {
@@ -42,6 +43,7 @@ export default function Phone({
   const lang = useLang()
   const { formState, getFieldState, register, setValue } = useFormContext()
   const fieldState = getFieldState(name)
+  const ccFieldState = getFieldState(countrySelectorName)
   const [phoneNumber, phoneNumberCC]: [string, string] = useWatch({
     name: [name, countrySelectorName],
   })
@@ -56,13 +58,18 @@ export default function Phone({
     setCountry(value.iso2)
     setValue(countrySelectorName, value.iso2, {
       shouldDirty: true,
+      shouldTouch: true,
       shouldValidate: true,
     })
     if (registerOptions.onBlur) {
       registerOptions.onBlur(value)
     }
   }
-
+  useEffect(() => {
+    if (!ccFieldState.isTouched) {
+      setCountry(phoneNumberCC)
+    }
+  }, [phoneNumberCC, setCountry, ccFieldState])
   return (
     <div className={`${styles.phone} ${className}`}>
       <CountrySelector