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 668babb6076..107617e7344 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 @@ -10,6 +10,7 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. | Property | Type | Description | | --------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------- | +| `pattern` | `boolean` | _(optional)_ Validation based on regex pattern for the number field e.g. `pattern="^[49]+"`. | | `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. | 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 d48a8bd197b..463b68ecb31 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx @@ -3,7 +3,7 @@ import { Autocomplete, Flex } from '../../../../components' import { InputMaskedProps } from '../../../../components/InputMasked' import classnames from 'classnames' import countries, { CountryType } from '../../constants/countries' -import StringComponent from '../String' +import StringComponent, { Props as InputProps } from '../String' import { useDataValue } from '../../hooks' import FieldBlock from '../../FieldBlock' import { FieldHelpProps, FieldProps } from '../../types' @@ -17,6 +17,7 @@ export type Props = FieldHelpProps & countryCodePlaceholder?: string countryCodeLabel?: string numberMask?: InputMaskedProps['mask'] + pattern?: InputProps['pattern'] width?: 'large' | 'stretch' omitCountryCodeField?: boolean onCountryCodeChange?: (value: string | undefined) => void @@ -63,6 +64,7 @@ function PhoneNumber(props: Props) { const errorMessages = useMemo( () => ({ required: tr.phoneNumberErrorRequired, + pattern: tr.phoneNumberErrorRequired, ...props?.errorMessages, }), [tr, props.errorMessages] @@ -93,6 +95,7 @@ function PhoneNumber(props: Props) { disabled, width = 'large', help, + pattern, required, validateInitially, continuousValidation, @@ -290,6 +293,8 @@ function PhoneNumber(props: Props) { width={omitCountryCodeField ? 'medium' : 'stretch'} help={help} required={required} + pattern={pattern} + errorMessages={errorMessages} validateInitially={validateInitially} continuousValidation={continuousValidation} validateUnchanged={validateUnchanged} 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 f8c8561b78f..7f9ee428e56 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 @@ -456,6 +456,47 @@ describe('Field.PhoneNumber', () => { ).not.toBeInTheDocument() }) + it('should handle "pattern" property', async () => { + render( + + + + ) + + const numberElement: HTMLInputElement = document.querySelector( + '.dnb-forms-field-phone-number__number input' + ) + + await userEvent.type(numberElement, '34') + fireEvent.blur(numberElement) + + expect(document.querySelector('[role="alert"]')).toBeInTheDocument() + expect(document.querySelector('[role="alert"]').textContent).toContain( + 'valid number' + ) + + await userEvent.type(numberElement, '{Backspace>8}89') + fireEvent.blur(numberElement) + + expect(document.querySelector('[role="alert"]')).toBeInTheDocument() + + await userEvent.type(numberElement, '{Backspace>8}43') + fireEvent.blur(numberElement) + + expect(numberElement.value).toBe('43 ​​ ​​ ​​') + + expect( + document.querySelector('[role="alert"]') + ).not.toBeInTheDocument() + + await userEvent.type(numberElement, '{Backspace>8}98') + fireEvent.blur(numberElement) + + expect( + document.querySelector('[role="alert"]') + ).not.toBeInTheDocument() + }) + it('should filter countries list with given filterCountries', () => { render(