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 9e901fd1354..fe1d037a179 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
@@ -47,7 +47,6 @@ function PhoneNumber(props: Props) {
className,
countryCodeFieldClassName,
numberFieldClassName,
- layout = 'vertical',
countryCodePlaceholder,
placeholder,
countryCodeLabel,
@@ -61,6 +60,10 @@ function PhoneNumber(props: Props) {
disabled,
width = 'large',
help,
+ required,
+ validateInitially,
+ continuousValidation,
+ validateUnchanged,
handleFocus,
handleBlur,
handleChange,
@@ -73,16 +76,11 @@ function PhoneNumber(props: Props) {
? value.match(/^(\+[^ ]+)? ?(.*)$/)
: [undefined, '', '']
- const getCountryData = ({ filter = null } = {}) => {
- const lang = sharedContext.locale?.split('-')[0]
- return countries
- .filter(({ cdc }) => !filter || `+${cdc}` === filter)
- .sort(({ i18n: a }, { i18n: b }) => (a[lang] > b[lang] ? 1 : -1))
- .map((country) => makeObject(country, lang))
- }
-
const singleCountryCodeData = useMemo(() => {
- return getCountryData({ filter: countryCode })
+ return getCountryData({
+ lang: sharedContext.locale?.split('-')[0],
+ filter: countryCode,
+ })
}, [])
const handleCountryCodeChange = useCallback(
@@ -118,7 +116,9 @@ function PhoneNumber(props: Props) {
const onFocusHandler = ({ dataList, updateData }) => {
// because there can be more than one country with same cdc
if (dataList.length < 10) {
- updateData(getCountryData())
+ updateData(
+ getCountryData({ lang: sharedContext.locale?.split('-')[0] })
+ )
}
handleFocus()
}
@@ -139,12 +139,11 @@ function PhoneNumber(props: Props) {
countryCodeFieldClassName
)}
placeholder={countryCodePlaceholder ?? ' '}
- label_direction={layout}
+ label_direction="vertical"
label={
countryCodeLabel ??
sharedContext?.translation.Forms.countryCodeLabel
}
- mode="async"
data={singleCountryCodeData}
value={countryCode}
disabled={disabled}
@@ -153,6 +152,7 @@ function PhoneNumber(props: Props) {
on_change={handleCountryCodeChange}
independent_width
search_numbers
+ keep_value_and_selection
no_animation={props.noAnimation}
stretch={width === 'stretch'}
/>
@@ -192,6 +192,10 @@ function PhoneNumber(props: Props) {
disabled={disabled}
width="stretch"
help={help}
+ required={required}
+ validateInitially={validateInitially}
+ continuousValidation={continuousValidation}
+ validateUnchanged={validateUnchanged}
/>
@@ -214,5 +218,12 @@ function makeObject(country: CountryType, lang: string) {
}
}
+function getCountryData({ lang = 'en', filter = null } = {}) {
+ return countries
+ .filter(({ cdc }) => !filter || `+${cdc}` === filter)
+ .sort(({ i18n: a }, { i18n: b }) => (a[lang] > b[lang] ? 1 : -1))
+ .map((country) => makeObject(country, lang))
+}
+
PhoneNumber._supportsSpacingProps = true
export default PhoneNumber
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 53a12e2a403..04bc75a2fc3 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
@@ -126,11 +126,21 @@ describe('Field.PhoneNumber', () => {
expect(codeElement.value).toEqual('NO (+47)')
// open
+ fireEvent.focus(codeElement)
fireEvent.keyDown(codeElement, {
- key: 'ArrowDown',
- keyCode: 40,
+ key: 'Enter',
+ keyCode: 13,
})
+ expect(
+ document.querySelector('li.dnb-drawer-list__option--selected')
+ .textContent
+ ).toBe('+47 Norge')
+
+ await userEvent.type(codeElement, '{Backspace}')
+
+ expect(codeElement.value).toEqual('NO (+47')
+
expect(
document.querySelectorAll('li.dnb-drawer-list__option')[0]
.textContent
@@ -168,4 +178,24 @@ describe('Field.PhoneNumber', () => {
'dnb-forms-field-block--width-large',
])
})
+
+ it('should require one number', async () => {
+ render(