fix(Forms): ensure Field.Upload handles required properly in Wizard

packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx

@@ -36,23 +36,24 @@ export type Props = FieldHelpProps &
     | 'skeleton'
   >
 
-function UploadComponent(props: Props) {
-  const validateRequired = useCallback(
-    (value: UploadValue, { required, isChanged, error }) => {
-      const hasError = value?.some((file) => file.errorMessage)
-      if (hasError) {
-        return new FormError('Upload.errorInvalidFiles')
-      }
-
-      if (required && (!isChanged || !(value.length > 0))) {
-        return error
-      }
-
-      return undefined
-    },
-    []
-  )
+const validateRequired = (
+  value: UploadValue,
+  { required, isChanged, error }
+) => {
+  const hasError = value?.some((file) => file.errorMessage)
+  if (hasError) {
+    return new FormError('Upload.errorInvalidFiles')
+  }
 
+  const hasFiles = value?.length > 0
+  if (required && ((!isChanged && !hasFiles) || !hasFiles)) {
+    return error
+  }
+
+  return undefined
+}
+
+function UploadComponent(props: Props) {
   const sharedTr = useSharedTranslation().Upload
   const formsTr = useFormsTranslation().Upload
 
@@ -101,7 +102,7 @@ function UploadComponent(props: Props) {
 
   useEffect(() => {
     setFiles(value)
-  }, [handleBlur, setFiles, value])
+  }, [setFiles, value])
 
   const changeHandler = useCallback(
     ({ files }: { files: UploadValue }) => {
@@ -116,7 +117,7 @@ function UploadComponent(props: Props) {
   const width = widthProp as FieldBlockWidth
   const fieldBlockProps: FieldBlockProps = {
     id,
-    forId: id,
+    forId: `${id}-input`,
     labelSrOnly: true,
     className,
     width,

packages/dnb-eufemia/src/extensions/forms/Field/Upload/__tests__/Upload.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { fireEvent, render, waitFor, screen } from '@testing-library/react'
-import { Field, Form } from '../../..'
+import { DataContext, Field, Form, Wizard } from '../../..'
 import { BYTES_IN_A_MEGA_BYTE } from '../../../../../components/upload/UploadVerify'
 import { createMockFile } from '../../../../../components/upload/__tests__/testHelpers'
 
@@ -74,7 +74,6 @@ describe('Field.Upload', () => {
   it('should render files given in data context', () => {
     render(
       <Form.Handler
-        onChange={(data) => console.log('onChange', data)}
         data={{
           myFiles: [
             { file: createMockFile('fileName-1.png', 100, 'image/png') },
@@ -782,4 +781,127 @@ describe('Field.Upload', () => {
       )
     })
   })
+
+  describe('In Wizard', () => {
+    const previousButton = () => {
+      return document.querySelector('.dnb-forms-previous-button')
+    }
+    const nextButton = () => {
+      return document.querySelector('.dnb-forms-next-button')
+    }
+    const output = () => {
+      return document.querySelector('output')
+    }
+
+    it('should keep files between steps', async () => {
+      let dataContext: DataContext.ContextState = null
+
+      render(
+        <Form.Handler>
+          <Wizard.Container>
+            <Wizard.Step title="Step 1">
+              <output>Step 1</output>
+              <Field.Upload required path="/files" />
+              <Wizard.Buttons />
+            </Wizard.Step>
+
+            <Wizard.Step title="Step 2">
+              <output>Step 2</output>
+              <Wizard.Buttons />
+            </Wizard.Step>
+          </Wizard.Container>
+
+          <DataContext.Consumer>
+            {(context) => {
+              dataContext = context
+              return null
+            }}
+          </DataContext.Consumer>
+        </Form.Handler>
+      )
+
+      const element = getRootElement()
+      const file = createMockFile('fileName-1.png', 100, 'image/png')
+
+      await waitFor(() =>
+        fireEvent.drop(element, {
+          dataTransfer: {
+            files: [file],
+          },
+        })
+      )
+
+      expect(output()).toHaveTextContent('Step 1')
+      expect(dataContext.internalDataRef.current.files[0].file).toBe(file)
+
+      await userEvent.click(nextButton())
+      expect(output()).toHaveTextContent('Step 2')
+      expect(dataContext.internalDataRef.current.files[0].file).toBe(file)
+
+      await userEvent.click(previousButton())
+      expect(output()).toHaveTextContent('Step 1')
+      expect(dataContext.internalDataRef.current.files[0].file).toBe(file)
+
+      await userEvent.click(nextButton())
+      expect(output()).toHaveTextContent('Step 2')
+      expect(dataContext.internalDataRef.current.files[0].file).toBe(file)
+      expect(dataContext.internalDataRef.current.files).toHaveLength(1)
+    })
+
+    it('should show required error when "required" is set', async () => {
+      render(
+        <Form.Handler>
+          <Wizard.Container>
+            <Wizard.Step title="Step 1">
+              <output>Step 1</output>
+              <Field.Upload required path="/files" />
+              <Wizard.Buttons />
+            </Wizard.Step>
+
+            <Wizard.Step title="Step 2">
+              <output>Step 2</output>
+              <Wizard.Buttons />
+            </Wizard.Step>
+          </Wizard.Container>
+        </Form.Handler>
+      )
+
+      const element = getRootElement()
+      const file = createMockFile('fileName-1.png', 100, 'image/png')
+
+      await waitFor(() =>
+        fireEvent.drop(element, {
+          dataTransfer: {
+            files: [file],
+          },
+        })
+      )
+
+      expect(output()).toHaveTextContent('Step 1')
+
+      await userEvent.click(nextButton())
+      expect(output()).toHaveTextContent('Step 2')
+
+      await userEvent.click(previousButton())
+      expect(output()).toHaveTextContent('Step 1')
+
+      expect(
+        document.querySelector('.dnb-form-status')
+      ).not.toBeInTheDocument()
+
+      const deleteButton = screen.queryByRole('button', {
+        name: nbShared.Upload.deleteButton,
+      })
+
+      await userEvent.click(deleteButton)
+      await userEvent.click(nextButton())
+
+      expect(output()).toHaveTextContent('Step 1')
+      expect(
+        document.querySelector(
+          '.dnb-forms-field-block__status .dnb-form-status'
+        )
+      ).toHaveTextContent(nbForms.Upload.errorRequired)
+    })
+  })
 })