diff --git a/src/components/FileInputField/FileInputField.jsx b/src/components/FileInputField/FileInputField.jsx index 3c946249a..7384ed22f 100644 --- a/src/components/FileInputField/FileInputField.jsx +++ b/src/components/FileInputField/FileInputField.jsx @@ -78,6 +78,7 @@ export const FileInputField = React.forwardRef((props, ref) => { const handleFileChange = (files, event) => { if (files.length === 0) { setSelectedFileNames([]); + onFilesChanged([], event); return; } @@ -85,6 +86,7 @@ export const FileInputField = React.forwardRef((props, ref) => { // does not accept multiple files, no files are processed. if (files.length > 1 && !multiple) { setSelectedFileNames([]); + onFilesChanged([], event); return; } diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx b/src/components/FileInputField/__tests__/FileInputField.spec.tsx index f37b1f0b9..f474ff97d 100644 --- a/src/components/FileInputField/__tests__/FileInputField.spec.tsx +++ b/src/components/FileInputField/__tests__/FileInputField.spec.tsx @@ -126,6 +126,26 @@ test.describe('FileInputField', () => { expect(called).toBe(true); }); + test('Call onFilesChanged callback when no file is selected.', async ({ mount }) => { + let called = false; + let calledWith: FileList | null = null; + + const component = await mount( + { + called = true; + calledWith = files; + }} + />, + ); + + const inputField = component.locator('input[type="file"]'); + await inputField.setInputFiles([]); + + expect(called).toBe(true); + expect(calledWith).toStrictEqual([]); + }); + test('Call onFilesChanged callback when file drag and drop into field.', async ({ mount, page,