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 6cd50b72a7b..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, @@ -136,7 +139,7 @@ function PhoneNumber(props: Props) { countryCodeFieldClassName )} placeholder={countryCodePlaceholder ?? ' '} - label_direction={layout} + label_direction="vertical" label={ countryCodeLabel ?? sharedContext?.translation.Forms.countryCodeLabel @@ -189,6 +192,10 @@ function PhoneNumber(props: Props) { disabled={disabled} width="stretch" help={help} + required={required} + 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 95e79ba08a4..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 @@ -178,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 index 8962f682bae..d20c417ae12 100644 --- 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 @@ -1,9 +1,14 @@ -import { Field } from '../../..' +import { Field, Form } from '../../..' export default { title: 'Eufemia/Forms/PhoneNumber', } export function PhoneNumber() { - return + return ( + + + + + ) }