[CA-4542] Value the phone number to null when not specified (#257)

rollup.config.js

@@ -9,7 +9,7 @@ import dts from 'rollup-plugin-dts'
 import css from 'rollup-plugin-import-css'
 import esbuild from 'rollup-plugin-esbuild'
 
-import pkg from './package.json' assert { type: 'json' }
+import pkg from './package.json' with { type: 'json' }
 const dependencies = Object.keys(pkg.dependencies)
 
 const banner = [

src/components/form/fields/phoneNumberField.tsx

@@ -11,6 +11,7 @@ import { FormGroup } from '../formControlsComponent';
 import { Validator } from '../../../core/validation';
 import { Config, Optional } from '../../../types';
 import { Input } from '../formControlsComponent';
+import {isRichFormValue} from "../../../helpers/utils.ts";
 
 function isValidCountryCode(code?: string): code is Country {
     return typeof code === 'string' && isSupportedCountry(code)
@@ -86,6 +87,8 @@ const PhoneNumberField = (props: PhoneNumberFieldProps) => {
     } = props;
 
     const [labels, setLabels] = useState<Labels>()
+    const currentValue = isRichFormValue(value, 'raw') ? value.raw : value
+    const error = typeof validation === 'object' && 'error' in validation ? validation.error : undefined
 
     useEffect(() => {
         async function fetchLabels() {
@@ -100,14 +103,14 @@ const PhoneNumberField = (props: PhoneNumberFieldProps) => {
          */
         let ignore = false;
         fetchLabels();
+        onChange({
+            value: currentValue == "" ? undefined: currentValue
+        })
         return () => {
             ignore = true;
         }
     }, [locale])
 
-    const currentValue = value !== null && typeof value === 'object' && 'raw' in value ? value.raw : value
-    const error = typeof validation === 'object' && 'error' in validation ? validation.error : undefined
-
     const handlePhoneChange = (value: Value) => {
         onChange({
             value,