diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx index bc01a873478..668babb6076 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx @@ -12,6 +12,7 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. | --------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------- | | `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents`. | | `countries` | `string` | _(optional)_ List only a certain set of countries: `Scandinavia`, `NorthernNordic` or `Europe` | +| `omitCountryCodeField` | `boolean` | _(optional)_ If `true` is given, then everything related to country code is removed. | | `countryCodeFieldClassName` | `string` | _(optional)_ Class name for the country code component. | | `numberFieldClassName` | `string` | _(optional)_ Class name for the number component. | | `countryCodePlaceholder` | `string` | _(optional)_ Placeholder for the country code field. | 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 c8d5d227332..5f6432e56e4 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx @@ -18,6 +18,7 @@ export type Props = FieldHelpProps & countryCodeLabel?: string numberMask?: InputMaskedProps['mask'] width?: 'large' | 'stretch' + omitCountryCodeField?: boolean onCountryCodeChange?: (value: string | undefined) => void onNumberChange?: (value: string | undefined) => void countries?: 'Scandinavia' | 'NorthernNordic' | 'Europe' @@ -96,6 +97,7 @@ function PhoneNumber(props: Props) { validateInitially, continuousValidation, validateUnchanged, + omitCountryCodeField, handleFocus, handleBlur, handleChange, @@ -193,7 +195,9 @@ function PhoneNumber(props: Props) { const handleNumberChange = useCallback( (value: string) => { const phoneNumber = value || emptyValue - const countryCode = countryCodeRef.current || emptyValue + const countryCode = omitCountryCodeField + ? emptyValue + : countryCodeRef.current || emptyValue phoneNumberRef.current = phoneNumber || emptyValue handleChange( @@ -206,7 +210,7 @@ function PhoneNumber(props: Props) { onNumberChange?.(phoneNumber) }, - [emptyValue, handleChange, onNumberChange] + [emptyValue, handleChange, onNumberChange, omitCountryCodeField] ) const onFocusHandler = useCallback( @@ -235,29 +239,31 @@ function PhoneNumber(props: Props) { {...pickSpacingProps(props)} > - + {!omitCountryCodeField && ( + + )} { .textContent ).toBe('+47 Norge') }) + + it('should omit country code implementation with omitCountryCodeField', async () => { + const onChange = jest.fn() + + const { rerender } = render( + + ) + + const numberElement = () => + document.querySelector( + '.dnb-forms-field-phone-number__number input' + ) as HTMLInputElement + + expect( + document.querySelector('.dnb-forms-field-phone-number__country-code') + ).not.toBeInTheDocument() + + await userEvent.type(numberElement(), '123') + + expect(numberElement().value).toBe('12 3​ ​​ ​​') + expect(onChange).toHaveBeenLastCalledWith('123', { + countryCode: undefined, + phoneNumber: '123', + }) + + rerender( + + ) + + expect(numberElement().value).toBe('99 99 99 99') + + await userEvent.type(numberElement(), '{Backspace>8}8888') + + expect(numberElement().value).toBe('88 88 ​​ ​​') + expect(onChange).toHaveBeenLastCalledWith('8888', { + countryCode: undefined, + phoneNumber: '8888', + }) + + await userEvent.type(numberElement(), '{Backspace>6}+4') + + expect(numberElement().value).toBe('88 4​ ​​ ​​') + expect(onChange).toHaveBeenLastCalledWith('884', { + countryCode: undefined, + phoneNumber: '884', + }) + }) })