fix(Field.PhoneNumber): ensure data value is used when given

packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx

@@ -115,6 +115,7 @@ function PhoneNumber(props: Props) {
   }
 
   const {
+    value,
     className,
     countryCodeFieldClassName,
     numberFieldClassName,
@@ -140,7 +141,6 @@ function PhoneNumber(props: Props) {
     handleFocus,
     handleBlur,
     handleChange,
-    updateValue,
     onCountryCodeChange,
     onNumberChange,
     filterCountries = ccFilter !== 'Prioritized'
@@ -183,20 +183,14 @@ function PhoneNumber(props: Props) {
         : countryCodeRef.current || emptyValue,
       phoneNumber = numberRef.current || emptyValue,
     }) => {
-      /**
-       * To ensure, we actually call onChange every time the cc value changes,
-       * even if the value is undefined
-       */
-      updateValue('invalidate')
-
       handleChange(
         joinValue([countryCode, phoneNumber]),
         omitCountryCodeField
           ? { phoneNumber }
           : { countryCode, phoneNumber }
       )
     },
-    [omitCountryCodeField, emptyValue, updateValue, handleChange]
+    [omitCountryCodeField, emptyValue, handleChange]
   )
 
   /**
@@ -208,7 +202,7 @@ function PhoneNumber(props: Props) {
    * We then update countryCode and phoneNumber when value changes.
    */
   useMemo(() => {
-    const [countryCode, phoneNumber] = splitValue(props.value)
+    const [countryCode, phoneNumber] = splitValue(props.value || value)
     numberRef.current = phoneNumber
 
     if (lang !== langRef.current || !wasFilled.current) {
@@ -219,7 +213,7 @@ function PhoneNumber(props: Props) {
 
       updateCurrentDataSet()
     }
-  }, [props.value, lang, updateCurrentDataSet])
+  }, [value, props.value, lang, updateCurrentDataSet])
 
   const prevCountryCodeRef = React.useRef(countryCodeRef.current)
 

packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx

@@ -287,6 +287,25 @@ describe('Field.PhoneNumber', () => {
     })
   })
 
+  it('should return correct value onChange event in data context', async () => {
+    const onChange = jest.fn()
+
+    render(
+      <Form.Handler onChange={onChange}>
+        <PhoneNumber path="/phone" />
+      </Form.Handler>
+    )
+
+    const phoneElement = document.querySelector(
+      '.dnb-forms-field-phone-number__number .dnb-input__input'
+    )
+
+    await userEvent.type(phoneElement, '9999')
+
+    expect(onChange).toHaveBeenCalledTimes(4)
+    expect(onChange).toHaveBeenLastCalledWith({ phone: '+47 9999' })
+  })
+
   it('should handle events correctly with initial value', async () => {
     const onChange = jest.fn()
     const onCountryCodeChange = jest.fn()
@@ -743,6 +762,20 @@ describe('Field.PhoneNumber', () => {
     expect(phoneNumberInput).toHaveAttribute('inputmode', 'tel')
   })
 
+  it('should render value from context', () => {
+    render(
+      <Form.Handler data={{ phoneNumber: '9999' }}>
+        <PhoneNumber path="/phoneNumber" />
+      </Form.Handler>
+    )
+
+    const phoneNumberInput = document.querySelector(
+      '.dnb-forms-field-phone-number__number .dnb-input__input'
+    )
+
+    expect(phoneNumberInput).toHaveValue('99 99 ​​ ​​')
+  })
+
   describe('locale', () => {
     it('should change locale', () => {
       const { rerender } = render(