Make validateInitially={false} on field work together with validate…

…Initially on section
dnbexperience · Sep 11, 2024 · b432a50 · b432a50
1 parent 7517098
commit b432a50
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 9 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditContainer.tsx
@@ -5,13 +5,13 @@ import { Flex } from '../../../../../components'
 import { Props as FlexContainerProps } from '../../../../../components/flex/Container'
 import { Lead } from '../../../../../elements'
 import FieldBoundaryProvider from '../../../DataContext/FieldBoundary/FieldBoundaryProvider'
+import SectionContainerContext from '../containers/SectionContainerContext'
 import EditToolbarTools from './EditToolbarTools'
 import SectionContainer, {
   SectionContainerProps,
 } from '../containers/SectionContainer'
 import Toolbar from '../containers/Toolbar'
 import { Path } from '../../../types'
-import SectionContainerContext from '../containers/SectionContainerContext'
 
 export type Props = {
   title?: React.ReactNode
@@ -36,7 +36,7 @@ function EditContainer(props: AllProps) {
 
   return (
     <FieldBoundaryProvider
-      showErrors={validateInitially && initialContainerMode === 'auto'}
+      showErrors={validateInitially}
       onPathError={onPathError}
     >
       <SectionContainer

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditToolbarTools.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditToolbarTools.tsx
@@ -62,9 +62,6 @@ export default function EditToolbarTools() {
 
   return (
     <>
-      <FormStatus show={showError && hasVisibleError} no_animation={false}>
-        {translation.errorInSection}
-      </FormStatus>
       <Flex.Horizontal gap="large">
         <Button
           variant="tertiary"
@@ -84,6 +81,14 @@ export default function EditToolbarTools() {
           {translation.cancelButton}
         </Button>
       </Flex.Horizontal>
+
+      <FormStatus
+        show={showError && hasVisibleError}
+        shellSpace={{ top: 'x-small' }}
+        no_animation={false}
+      >
+        {translation.errorInSection}
+      </FormStatus>
     </>
   )
 }
diff --git a/...a/src/extensions/forms/Form/Section/EditContainer/__tests__/EditAndViewContainer.test.tsx b/...a/src/extensions/forms/Form/Section/EditContainer/__tests__/EditAndViewContainer.test.tsx
@@ -209,6 +209,26 @@ describe('EditContainer and ViewContainer', () => {
       expect(containerMode).toBe('view')
     })
 
+    it('fields with validateInitially=false should not validate initially', async () => {
+      render(
+        <Form.Section validateInitially>
+          <Form.Section.EditContainer>
+            <Field.String required />
+            <Field.String required validateInitially={false} />
+          </Form.Section.EditContainer>
+        </Form.Section>
+      )
+
+      expect(document.querySelectorAll('.dnb-form-status')).toHaveLength(1)
+      const [, second] = Array.from(document.querySelectorAll('input'))
+      expect(second).toHaveValue('')
+
+      await userEvent.type(second, 'x{Backspace}')
+      fireEvent.blur(second)
+
+      expect(document.querySelectorAll('.dnb-form-status')).toHaveLength(2)
+    })
+
     it('the cancel button should not cancel the edit mode', async () => {
       let containerMode = null
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/stories/Section.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/stories/Section.stories.tsx
@@ -250,7 +250,7 @@ export function OpenWhenFieldValidationError() {
     return (
       <Form.Section.EditContainer>
         <Field.Name.First path="/firstName" />
-        <Field.Name.Last path="/lastName" />
+        <Field.Name.Last path="/lastName" validateInitially={false} />
       </Form.Section.EditContainer>
     )
   }, [])
@@ -272,6 +272,7 @@ export function OpenWhenFieldValidationError() {
       defaultData={{
         nestedPath: {
           firstName: 'Nora',
+          lastName: undefined, // initiate error
         },
       }}
     >

diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/__tests__/useFieldProps.test.tsx b/packages/dnb-eufemia/src/extensions/forms/hooks/__tests__/useFieldProps.test.tsx
@@ -277,6 +277,29 @@ describe('useFieldProps', () => {
       })
     })
 
+    it('should not return error when validateInitially is set to false', async () => {
+      const { result } = renderHook(useFieldProps, {
+        initialProps: {
+          value: '',
+          error: new Error('Error message'),
+          validateInitially: false,
+        },
+      })
+
+      await waitFor(() => {
+        expect(result.current.error).toBeUndefined()
+      })
+
+      act(() => {
+        result.current.handleChange('x')
+        result.current.handleBlur()
+      })
+
+      await waitFor(() => {
+        expect(result.current.error).toBeInstanceOf(Error)
+      })
+    })
+
     describe('with async validator', () => {
       const validateBlur = async (result, value = Date.now()) => {
         act(() => {

diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts b/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts
@@ -248,7 +248,7 @@ export default function useFieldProps<Value, EmptyValue, Props>(
   // - Should errors received through validation be shown initially. Assume that providing a direct prop to
   // the component means it is supposed to be shown initially.
   const revealErrorRef = useRef<boolean>(
-    Boolean(validateInitially || errorProp)
+    validateInitially ?? Boolean(errorProp)
   )
   // - Local errors are errors based on validation instructions received by
   const errorMethodRef = useRef<
@@ -367,16 +367,27 @@ export default function useFieldProps<Value, EmptyValue, Props>(
   )
 
   const revealError = useCallback(() => {
+    // To support "validateInitially={false}" prop, we need to make sure that the error is not shown initially
+    if (revealErrorRef.current === false && validateInitially === false) {
+      revealErrorRef.current = undefined
+      return // stop here
+    }
+
     if (!revealErrorRef.current) {
       revealErrorRef.current = true
       showFieldErrorFieldBlock?.(identifier, true)
       setHasVisibleErrorDataContext?.(identifier, !!localErrorRef.current)
     }
-  }, [identifier, setHasVisibleErrorDataContext, showFieldErrorFieldBlock])
+  }, [
+    identifier,
+    setHasVisibleErrorDataContext,
+    showFieldErrorFieldBlock,
+    validateInitially,
+  ])
 
   const hideError = useCallback(() => {
     if (revealErrorRef.current) {
-      revealErrorRef.current = false
+      revealErrorRef.current = undefined
       showFieldErrorFieldBlock?.(identifier, false)
       setHasVisibleErrorDataContext?.(identifier, false)
     }