fix(forms): validate fields inside Section.EditContainer when done …

…button is pressed (#3851)
dnbexperience · Aug 21, 2024 · 1c34980 · 1c34980
1 parent 9c9142d
commit 1c34980
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 6 deletions.
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
@@ -12,8 +12,12 @@ export default function EditToolbarTools() {
   const { restoreOriginalData } = useContainerDataStore()
 
   const { switchContainerMode } = useContext(SectionContainerContext) || {}
-  const { hasVisibleError, hasSubmitError } =
-    useContext(FieldBoundaryContext) || {}
+  const {
+    hasVisibleError,
+    hasSubmitError,
+    hasError,
+    setShowBoundaryErrors,
+  } = useContext(FieldBoundaryContext) || {}
 
   const translation = useTranslation().SectionEditContainer
 
@@ -22,20 +26,36 @@ export default function EditToolbarTools() {
   const cancelHandler = useCallback(() => {
     if (hasSubmitError) {
       setShowError(true)
+      setShowBoundaryErrors?.(true)
     } else {
       setShowError(false)
+      setShowBoundaryErrors?.(false)
       restoreOriginalData()
       switchContainerMode?.('view')
     }
-  }, [hasSubmitError, restoreOriginalData, switchContainerMode])
+  }, [
+    hasSubmitError,
+    restoreOriginalData,
+    setShowBoundaryErrors,
+    switchContainerMode,
+  ])
   const doneHandler = useCallback(() => {
-    if (hasVisibleError) {
-      setShowError(true)
+    if (hasError) {
+      setShowBoundaryErrors?.(true)
+      if (hasVisibleError) {
+        setShowError(true)
+      }
     } else {
       setShowError(false)
+      setShowBoundaryErrors?.(false)
       switchContainerMode?.('view')
     }
-  }, [hasVisibleError, switchContainerMode])
+  }, [
+    hasVisibleError,
+    hasError,
+    setShowBoundaryErrors,
+    switchContainerMode,
+  ])
 
   return (
     <>

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
@@ -5,6 +5,9 @@ import ViewContainer from '../../ViewContainer'
 import SectionContainerContext from '../../containers/SectionContainerContext'
 import { Field, Form } from '../../../..'
 import userEvent from '@testing-library/user-event'
+import nbNO from '../../../../constants/locales/nb-NO'
+
+const nb = nbNO['nb-NO']
 
 describe('EditContainer and ViewContainer', () => {
   it('should switch mode on pressing edit button', () => {
@@ -212,4 +215,55 @@ describe('EditContainer and ViewContainer', () => {
     expect(viewBlock).toHaveClass('dnb-forms-section-block--variant-basic')
     expect(editBlock).toHaveClass('dnb-forms-section-block--variant-basic')
   })
+
+  it('should validate on done button click', async () => {
+    render(
+      <Form.Handler>
+        <Form.Section>
+          <EditContainer>
+            <Field.Name required path="/name" />
+          </EditContainer>
+          <ViewContainer>content</ViewContainer>
+        </Form.Section>
+      </Form.Handler>
+    )
+
+    expect(
+      document.querySelector('.dnb-form-status')
+    ).not.toBeInTheDocument()
+
+    const [doneButton, cancelButton, editButton] = Array.from(
+      document.querySelectorAll('button')
+    )
+    expect(doneButton).toHaveTextContent(
+      nb.SectionEditContainer.doneButton
+    )
+    expect(cancelButton).toHaveTextContent(
+      nb.SectionEditContainer.cancelButton
+    )
+    expect(editButton).toHaveTextContent(
+      nbNO['nb-NO'].SectionViewContainer.editButton
+    )
+    await userEvent.click(doneButton)
+
+    expect(document.querySelector('.dnb-form-status')).toBeInTheDocument()
+
+    await userEvent.click(cancelButton)
+    await userEvent.click(editButton)
+
+    expect(
+      document.querySelector('.dnb-form-status')
+    ).not.toBeInTheDocument()
+
+    await userEvent.click(doneButton)
+
+    expect(document.querySelector('.dnb-form-status')).toBeInTheDocument()
+
+    await userEvent.type(document.querySelector('input'), 'foo')
+    await userEvent.click(doneButton)
+
+    expect(
+      document.querySelector('.dnb-form-status')
+    ).not.toBeInTheDocument()
+  })
 })