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() + + const inputElement = document.querySelector( + '.dnb-forms-field-phone-number__number input' + ) as HTMLInputElement + + await userEvent.type(inputElement, '1{Backspace}') + fireEvent.blur(inputElement) + + expect(document.querySelector('[role="alert"]')).toBeInTheDocument() + + await userEvent.type(inputElement, '1') + fireEvent.blur(inputElement) + + expect( + document.querySelector('[role="alert"]') + ).not.toBeInTheDocument() + }) }) diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/stories/PhoneNumber.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/stories/PhoneNumber.stories.tsx new file mode 100644 index 00000000000..d20c417ae12 --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/stories/PhoneNumber.stories.tsx @@ -0,0 +1,14 @@ +import { Field, Form } from '../../..' + +export default { + title: 'Eufemia/Forms/PhoneNumber', +} + +export function PhoneNumber() { + return ( + + + + + ) +}