Refactor: Prevent File Upload description from triggering file select…

…ion modal (#7433)
impress-org · Aug 21, 2024 · 0291ac8 · 0291ac8
1 parent 965203a
commit 0291ac8
Showing 1 changed file with 7 additions and 11 deletions.
diff --git a/src/DonationForms/resources/registrars/templates/fields/File.tsx b/src/DonationForms/resources/registrars/templates/fields/File.tsx
@@ -1,23 +1,19 @@
 import {FileProps} from '@givewp/forms/propTypes';
 
-export default function File({
-    Label,
-    allowedMimeTypes,
-    ErrorMessage,
-    fieldError,
-    description,
-    inputProps,
-}: FileProps) {
+export default function File({Label, allowedMimeTypes, ErrorMessage, fieldError, description, inputProps}: FileProps) {
     const FieldDescription = window.givewp.form.templates.layouts.fieldDescription;
     const {setValue} = window.givewp.form.hooks.useFormContext();
     const {name} = inputProps;
 
     return (
-        <label>
-            <Label />
+        <>
+            <label htmlFor={`${name}-field`}>
+                <Label />
+            </label>
             {description && <FieldDescription description={description} />}
 
             <input
+                id={`${name}-field`}
                 type="file"
                 aria-invalid={fieldError ? 'true' : 'false'}
                 accept={allowedMimeTypes.join(',')}
@@ -29,6 +25,6 @@ export default function File({
             <input type="hidden" {...inputProps} />
 
             <ErrorMessage />
-        </label>
+        </>
     );
 }