diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx index 29099b27da8..f6447fb4be1 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx +++ b/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, diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/__tests__/Upload.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/__tests__/Upload.test.tsx index 05578348667..f89a52d0542 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/__tests__/Upload.test.tsx +++ b/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(