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 1f8bcdfad26..9e901fd1354 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
@@ -20,6 +20,11 @@ export type Props = FieldHelpProps &
width?: 'large' | 'stretch'
onCountryCodeChange?: (value: string | undefined) => void
onNumberChange?: (value: string | undefined) => void
+ } & {
+ /**
+ * For internal testing purposes
+ */
+ noAnimation?: boolean
}
function PhoneNumber(props: Props) {
@@ -68,18 +73,17 @@ function PhoneNumber(props: Props) {
? value.match(/^(\+[^ ]+)? ?(.*)$/)
: [undefined, '', '']
- const lang = sharedContext.locale?.split('-')[0]
- const countryCodeData = useMemo(
- () =>
- countries.map((country) => ({
- selectedKey: `+${country.cdc}`,
- selected_value: `${country.iso} (+${country.cdc})`,
- content: `+${country.cdc} ${
- country.i18n[lang] ?? country.i18n.en
- }`,
- })),
- [sharedContext.locale]
- )
+ 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 })
+ }, [])
const handleCountryCodeChange = useCallback(
({ data }: { data: { selectedKey: string } }) => {
@@ -111,6 +115,14 @@ function PhoneNumber(props: Props) {
[countryCode, emptyValue, handleChange, onNumberChange]
)
+ const onFocusHandler = ({ dataList, updateData }) => {
+ // because there can be more than one country with same cdc
+ if (dataList.length < 10) {
+ updateData(getCountryData())
+ }
+ handleFocus()
+ }
+
return (
@@ -184,5 +198,21 @@ function PhoneNumber(props: Props) {
)
}
+type CountryType = {
+ cdc: string
+ iso: string
+ i18n: {
+ en: string
+ }
+}
+
+function makeObject(country: CountryType, lang: string) {
+ return {
+ selectedKey: `+${country.cdc}`,
+ selected_value: `${country.iso} (+${country.cdc})`,
+ content: `+${country.cdc} ${country.i18n[lang] ?? country.i18n.en}`,
+ }
+}
+
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 78800d7ee02..53a12e2a403 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
@@ -83,6 +83,25 @@ describe('Field.PhoneNumber', () => {
expect(onBlur).toHaveBeenLastCalledWith('+47 99999999')
})
+ it('should have selected correct item', async () => {
+ render()
+
+ const codeElement: HTMLInputElement = document.querySelector(
+ '.dnb-forms-field-phone-number__country-code input'
+ )
+
+ expect(codeElement.value).toEqual('NO (+47)')
+
+ await userEvent.type(codeElement, ' ')
+
+ const items = document.querySelectorAll('li.dnb-drawer-list__option')
+ const item = Array.from(items).find((element) => {
+ return element.className.includes('selected')
+ })
+
+ expect(item.textContent).toBe('+47 Norge')
+ })
+
it('should return correct value onChange event', async () => {
const onChange = jest.fn()
const onCountryCodeChange = jest.fn()
@@ -90,6 +109,7 @@ describe('Field.PhoneNumber', () => {
)
@@ -99,14 +119,31 @@ describe('Field.PhoneNumber', () => {
await userEvent.type(phoneElement, '99999999')
expect(onChange).toHaveBeenLastCalledWith('+47 99999999')
- const codeElement = document.querySelector(
+ const codeElement: HTMLInputElement = document.querySelector(
'.dnb-forms-field-phone-number__country-code input'
)
+ expect(codeElement.value).toEqual('NO (+47)')
+
+ // open
+ fireEvent.keyDown(codeElement, {
+ key: 'ArrowDown',
+ keyCode: 40,
+ })
+
+ expect(
+ document.querySelectorAll('li.dnb-drawer-list__option')[0]
+ .textContent
+ ).toBe('+47 Norge')
+
+ fireEvent.focus(codeElement)
fireEvent.change(codeElement, { target: { value: '+41' } })
fireEvent.click(
document.querySelectorAll('li.dnb-drawer-list__option')[0]
)
+
+ expect(codeElement.value).toEqual('CH (+41)')
+
await wait(1)
expect(onCountryCodeChange).toHaveBeenCalledTimes(1)