From 2dab51fc93236b9ce8ec57beb345bf38e5181bd0 Mon Sep 17 00:00:00 2001
From: James Talton <talton@gmail.com>
Date: Mon, 15 Jan 2024 09:08:11 -0500
Subject: [PATCH] FileUploadField fix to set name attribute on input element
 (#9941)

* FileUploadField name attribute fix

* update snapshots

* prevent breaking change

---------

Co-authored-by: nicolethoen <nthoen@redhat.com>
---
 .../src/components/FileUpload/FileUploadField.tsx           | 6 ++++--
 .../__tests__/__snapshots__/FileUpload.test.tsx.snap        | 1 -
 .../__tests__/__snapshots__/FileUploadField.test.tsx.snap   | 1 -
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/components/FileUpload/FileUploadField.tsx b/packages/react-core/src/components/FileUpload/FileUploadField.tsx
index 1ca3cae4c9a..13a92020ce9 100644
--- a/packages/react-core/src/components/FileUpload/FileUploadField.tsx
+++ b/packages/react-core/src/components/FileUpload/FileUploadField.tsx
@@ -37,6 +37,8 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
   hideDefaultPreview?: boolean;
   /** Unique id for the text area. Also used to generate ids for accessible labels. */
   id: string;
+  /** Name property for the text input. */
+  name?: string;
   /** Flag to disable the clear button. */
   isClearButtonDisabled?: boolean;
   /** Flag to show if the field is disabled. */
@@ -84,6 +86,7 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
 
 export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
   id,
+  name,
   type,
   value = '',
   filename = '',
@@ -135,7 +138,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
               readOnlyVariant="default" // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
               isDisabled={isDisabled}
               id={`${id}-filename`}
-              name={`${id}-filename`}
+              name={name || `${id}-filename`}
               aria-label={filenameAriaLabel}
               placeholder={filenamePlaceholder}
               aria-describedby={`${id}-browse-button`}
@@ -172,7 +175,6 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
             resizeOrientation={TextAreResizeOrientation.vertical}
             validated={validated}
             id={id}
-            name={id}
             aria-label={ariaLabel}
             value={value as string}
             onChange={onTextAreaChange}
diff --git a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
index ce14fa674b2..5d0aefb60c0 100644
--- a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
+++ b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
@@ -76,7 +76,6 @@ exports[`simple fileupload 1`] = `
           aria-invalid="false"
           aria-label="File upload"
           id="simple-text-file"
-          name="simple-text-file"
           placeholder=""
         />
       </span>
diff --git a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap
index 587e4c18e29..a58d5b604e5 100644
--- a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap
+++ b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap
@@ -74,7 +74,6 @@ exports[`simple fileuploadfield 1`] = `
           aria-invalid="false"
           aria-label="File upload"
           id="custom-file-upload"
-          name="custom-file-upload"
           placeholder=""
         />
       </span>