Fix FileInputField to call onFilesChanged even when no file is selected (#664)

This is situation when user opens file selection dialog, but dismisses
it by clicking on Close/Cancel button or pressing Escape key.

Before this fix, state of the input was reset, but not propagated.

Author: bedrich-schindler

src/components/FileInputField/FileInputField.jsx

@@ -78,13 +78,15 @@ export const FileInputField = React.forwardRef((props, ref) => {
   const handleFileChange = (files, event) => {
     if (files.length === 0) {
       setSelectedFileNames([]);
+      onFilesChanged([], event);
       return;
     }
 
     // Mimic the native behavior of the `input` element: if multiple files are selected and the input
     // does not accept multiple files, no files are processed.
     if (files.length > 1 && !multiple) {
       setSelectedFileNames([]);
+      onFilesChanged([], event);
       return;
     }
 

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(
+          <FileInputFieldForTest
+            onFilesChanged={(files: FileList) => {
+              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,