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)