Fix file upload being invisible when using the ✨ 'JavaScript enhanced' ✨ version with an empty label

[36degrees]

When using the JavaScript ‘enhanced’ version of the file upload component, we currently have a failure state where the native input is hidden before we throw an error if no label is present, resulting in neither the input nor the enhanced version being rendered.

Defer hiding the native input until after we’re done with these checks.

Fixes #6104

[github-actions]

JavaScript changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
index 2be196ecc..da44122fe 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
@@ -757,7 +757,7 @@ class FileUpload extends ConfigurableComponent {
             identifier: 'File inputs (`<input type="file">`)'
         });
         if ("file" !== i.type) throw new ElementError(formatErrorMessage(FileUpload, 'File input (`<input type="file">`) attribute (`type`) is not `file`'));
-        if (this.$input = i, this.$input.setAttribute("hidden", "true"), !this.$input.id) throw new ElementError({
+        if (this.$input = i, !this.$input.id) throw new ElementError({
             component: FileUpload,
             identifier: 'File input (`<input type="file">`) attribute (`id`)'
         });
@@ -765,7 +765,7 @@ class FileUpload extends ConfigurableComponent {
             locale: closestAttributeValue(this.$root, "lang")
         });
         const n = this.findLabel();
-        n.id || (n.id = `${this.id}-label`), this.$input.id = `${this.id}-input`;
+        n.id || (n.id = `${this.id}-label`), this.$input.id = `${this.id}-input`, this.$input.setAttribute("hidden", "true");
         const s = document.createElement("button");
         s.classList.add("govuk-file-upload-button"), s.type = "button", s.id = this.id, s.classList.add("govuk-file-upload-button--empty");
         const o = this.$input.getAttribute("aria-describedby");

---

Action run for 86e4b47

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.js b/packages/govuk-frontend/dist/govuk/all.bundle.js
index 97af394cc..3393f4081 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.js
@@ -1690,7 +1690,6 @@
         throw new ElementError(formatErrorMessage(FileUpload, 'File input (`<input type="file">`) attribute (`type`) is not `file`'));
       }
       this.$input = $input;
-      this.$input.setAttribute('hidden', 'true');
       if (!this.$input.id) {
         throw new ElementError({
           component: FileUpload,
@@ -1706,6 +1705,7 @@
         $label.id = `${this.id}-label`;
       }
       this.$input.id = `${this.id}-input`;
+      this.$input.setAttribute('hidden', 'true');
       const $button = document.createElement('button');
       $button.classList.add('govuk-file-upload-button');
       $button.type = 'button';
diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.mjs b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
index 7543c0944..7ab8a4b1e 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
@@ -1684,7 +1684,6 @@ class FileUpload extends ConfigurableComponent {
       throw new ElementError(formatErrorMessage(FileUpload, 'File input (`<input type="file">`) attribute (`type`) is not `file`'));
     }
     this.$input = $input;
-    this.$input.setAttribute('hidden', 'true');
     if (!this.$input.id) {
       throw new ElementError({
         component: FileUpload,
@@ -1700,6 +1699,7 @@ class FileUpload extends ConfigurableComponent {
       $label.id = `${this.id}-label`;
     }
     this.$input.id = `${this.id}-input`;
+    this.$input.setAttribute('hidden', 'true');
     const $button = document.createElement('button');
     $button.classList.add('govuk-file-upload-button');
     $button.type = 'button';
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js
index d8a3c6908..0bce2903b 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js
@@ -520,7 +520,6 @@
         throw new ElementError(formatErrorMessage(FileUpload, 'File input (`<input type="file">`) attribute (`type`) is not `file`'));
       }
       this.$input = $input;
-      this.$input.setAttribute('hidden', 'true');
       if (!this.$input.id) {
         throw new ElementError({
           component: FileUpload,
@@ -536,6 +535,7 @@
         $label.id = `${this.id}-label`;
       }
       this.$input.id = `${this.id}-input`;
+      this.$input.setAttribute('hidden', 'true');
       const $button = document.createElement('button');
       $button.classList.add('govuk-file-upload-button');
       $button.type = 'button';
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs
index 34aec455e..9e538d975 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs
@@ -514,7 +514,6 @@ class FileUpload extends ConfigurableComponent {
       throw new ElementError(formatErrorMessage(FileUpload, 'File input (`<input type="file">`) attribute (`type`) is not `file`'));
     }
     this.$input = $input;
-    this.$input.setAttribute('hidden', 'true');
     if (!this.$input.id) {
       throw new ElementError({
         component: FileUpload,
@@ -530,6 +529,7 @@ class FileUpload extends ConfigurableComponent {
       $label.id = `${this.id}-label`;
     }
     this.$input.id = `${this.id}-input`;
+    this.$input.setAttribute('hidden', 'true');
     const $button = document.createElement('button');
     $button.classList.add('govuk-file-upload-button');
     $button.type = 'button';
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs
index 9929b729b..98c855e90 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs
@@ -35,7 +35,6 @@ class FileUpload extends ConfigurableComponent {
       throw new ElementError(formatErrorMessage(FileUpload, 'File input (`<input type="file">`) attribute (`type`) is not `file`'));
     }
     this.$input = $input;
-    this.$input.setAttribute('hidden', 'true');
     if (!this.$input.id) {
       throw new ElementError({
         component: FileUpload,
@@ -51,6 +50,7 @@ class FileUpload extends ConfigurableComponent {
       $label.id = `${this.id}-label`;
     }
     this.$input.id = `${this.id}-input`;
+    this.$input.setAttribute('hidden', 'true');
     const $button = document.createElement('button');
     $button.classList.add('govuk-file-upload-button');
     $button.type = 'button';

---

Action run for 86e4b47

[github-actions]

📋 Stats

No changes to any file sizes!

---

Action run for 86e4b47

[romaricpascal]

Nice catch! 🙌🏻