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

dnbexperience · Jan 12, 2024 · 6c92502 · 6c92502
1 parent a5ae88b
commit 6c92502
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
@@ -115,6 +115,7 @@ function PhoneNumber(props: Props) {
   }
 
   const {
+    value,
     className,
     countryCodeFieldClassName,
     numberFieldClassName,
@@ -208,7 +209,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 +220,7 @@ function PhoneNumber(props: Props) {
 
       updateCurrentDataSet()
     }
-  }, [props.value, lang, updateCurrentDataSet])
+  }, [value, props.value, lang, updateCurrentDataSet])
 
   const prevCountryCodeRef = React.useRef(countryCodeRef.current)
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx
@@ -743,6 +743,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(