click label instead of input

alphagov · Oct 4, 2024 · cee7848 · cee7848
1 parent d411a91
commit cee7848
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs
@@ -75,6 +75,15 @@ export class FileUpload extends GOVUKFrontendComponent {
       locale: closestAttributeValue($input, 'lang')
     })
 
+    this.$label = document.querySelector(`[for="${$input.id}"]`)
+
+    if (!this.$label) {
+      throw new ElementError({
+        componentName: 'File upload',
+        identifier: 'No label'
+      })
+    }
+
     $input.addEventListener('change', this.onChange.bind(this))
     this.$input = $input
 
@@ -148,7 +157,9 @@ export class FileUpload extends GOVUKFrontendComponent {
    * When the button is clicked, emulate clicking the actual, hidden file input
    */
   onClick() {
-    this.$input.click()
+    if (this.$label instanceof HTMLElement) {
+      this.$label.click()
+    }
   }
 
   /**