Make required work

dnbexperience · Nov 13, 2023 · cc1c0f3 · cc1c0f3
1 parent f11b1d5
commit cc1c0f3
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git 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}
         />
       </Flex.Horizontal>
     </FieldBlock>

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
@@ -178,4 +178,24 @@ describe('Field.PhoneNumber', () => {
       'dnb-forms-field-block--width-large',
     ])
   })
+
+  it('should require one number', async () => {
+    render(<PhoneNumber required />)
+
+    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
@@ -1,9 +1,14 @@
-import { Field } from '../../..'
+import { Field, Form } from '../../..'
 
 export default {
   title: 'Eufemia/Forms/PhoneNumber',
 }
 
 export function PhoneNumber() {
-  return <Field.PhoneNumber />
+  return (
+    <Form.Handler onSubmit={console.log}>
+      <Field.PhoneNumber required validateInitially path="/phoneNumber" />
+      <Form.SubmitButton top />
+    </Form.Handler>
+  )
 }