FileUploadField fix to set name attribute on input element (patternfl…

…y#9941) * FileUploadField name attribute fix * update snapshots * prevent breaking change --------- Co-authored-by: nicolethoen <nthoen@redhat.com>
tlabaj · Jan 15, 2024 · 2dab51f · 2dab51f
1 parent 10a26e6
commit 2dab51f
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git 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/...ges/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap b/...ges/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/...eact-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap b/...eact-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>