diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx index e47eaad10c6..2e0177ff2f5 100644 --- 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 index 5677cebe13e..e51708140df 100644 --- 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( + + + + ) + + 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(