From a42fe7a7718a510806f7d1543ccdb7822b479489 Mon Sep 17 00:00:00 2001
From: agonzalez97 <aidamaria.gonzalez@dxc.com>
Date: Wed, 2 Nov 2022 15:28:44 +0100
Subject: [PATCH 1/2] Fixed file input value when used on forms

---
 lib/src/file-input/FileInput.test.js | 27 ++++++++++++++++++++++++++
 lib/src/file-input/FileInput.tsx     | 29 ++++++++++++++++++++++------
 2 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/lib/src/file-input/FileInput.test.js b/lib/src/file-input/FileInput.test.js
index ae790064f..13c06f5f9 100644
--- a/lib/src/file-input/FileInput.test.js
+++ b/lib/src/file-input/FileInput.test.js
@@ -281,4 +281,31 @@ describe("FileInput component tests", () => {
       ]);
     });
   });
+
+  test("File input sends value when submitted in a form", () => {
+    const newFile = new File(["newFile"], "newFile.pdf", { type: "pdf" });
+    const handlerOnSubmit = jest.fn((e) => {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      const formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({ file: newFile });
+    });
+    const { getByText, getByLabelText } = render(
+      <form onSubmit={handlerOnSubmit}>
+        <DxcFileInput
+          label="File input label"
+          name="file"
+          helperText="File input helper text"
+          mode="filedrop"
+          buttonLabel="Choose"
+          dropAreaLabel="(or drop the files)"
+        />
+        <button type="submit">Submit</button>
+      </form>
+    );
+    const inputFile = getByLabelText("File input label", { hidden: true });
+    const submit = getByText("Submit");
+    fireEvent.change(inputFile, { target: { files: [newFile] } });
+    userEvent.click(submit);
+  });
 });
diff --git a/lib/src/file-input/FileInput.tsx b/lib/src/file-input/FileInput.tsx
index 89a068872..d99f55deb 100644
--- a/lib/src/file-input/FileInput.tsx
+++ b/lib/src/file-input/FileInput.tsx
@@ -186,7 +186,17 @@ const DxcFileInput = ({
         <HelperText disabled={disabled}>{helperText}</HelperText>
         {mode === "file" ? (
           <FileContainer multiple={multiple} files={files}>
-            <HiddenInputFile id={fileInputId} type="file" accept={accept} multiple={multiple} onChange={selectFiles} />
+            <HiddenInputFile
+              id={fileInputId}
+              type="file"
+              accept={accept}
+              multiple={multiple}
+              onChange={selectFiles}
+              name={name}
+              disabled={disabled}
+              readOnly
+              aria-hidden="true"
+            />
             <DxcButton
               mode="secondary"
               label={
@@ -223,7 +233,17 @@ const DxcFileInput = ({
           </FileContainer>
         ) : (
           <Container>
-            <HiddenInputFile id={fileInputId} type="file" accept={accept} multiple={multiple} onChange={selectFiles} />
+            <HiddenInputFile
+              id={fileInputId}
+              type="file"
+              accept={accept}
+              multiple={multiple}
+              onChange={selectFiles}
+              name={name}
+              disabled={disabled}
+              readOnly
+              aria-hidden="true"
+            />
             <DragDropArea
               isDragging={isDragging}
               disabled={disabled}
@@ -352,10 +372,7 @@ const FileContainer = styled.div`
 `;
 
 const HiddenInputFile = styled.input`
-  visibility: hidden;
-  position: absolute;
-  width: 0px;
-  height: 0px;
+  display: none;
 `;
 
 const ButtonContainer = styled.div`

From ae135f436761341dee112222d2a9adabe276fe17 Mon Sep 17 00:00:00 2001
From: agonzalez97 <aidamaria.gonzalez@dxc.com>
Date: Fri, 4 Nov 2022 11:40:42 +0100
Subject: [PATCH 2/2] Renamed input

---
 lib/src/file-input/FileInput.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/src/file-input/FileInput.tsx b/lib/src/file-input/FileInput.tsx
index d99f55deb..070866249 100644
--- a/lib/src/file-input/FileInput.tsx
+++ b/lib/src/file-input/FileInput.tsx
@@ -186,7 +186,7 @@ const DxcFileInput = ({
         <HelperText disabled={disabled}>{helperText}</HelperText>
         {mode === "file" ? (
           <FileContainer multiple={multiple} files={files}>
-            <HiddenInputFile
+            <ValueInput
               id={fileInputId}
               type="file"
               accept={accept}
@@ -233,7 +233,7 @@ const DxcFileInput = ({
           </FileContainer>
         ) : (
           <Container>
-            <HiddenInputFile
+            <ValueInput
               id={fileInputId}
               type="file"
               accept={accept}
@@ -371,7 +371,7 @@ const FileContainer = styled.div`
   margin-top: 0.25rem;
 `;
 
-const HiddenInputFile = styled.input`
+const ValueInput = styled.input`
   display: none;
 `;