Add new 'include_blank' option for autocomplete module

It's a common use case to show a blank option on the select dropdown, and it feels wrong that in each case where that's required, we have to prefix options with `[""]`. It should just be a natively supported feature (allowing us to change the underlying implementation much more easily). This commit carries over the `include_blank` option from the 'select_with_search' component so that we have feature parity between the two components. It also uses the new option on existing 'autocomplete' instances.
alphagov · Feb 18, 2025 · 2140ccb · 2140ccb
1 parent 534daa7
commit 2140ccb
Show file tree

Hide file tree

Showing 14 changed files with 61 additions and 28 deletions.
diff --git a/app/views/admin/detailed_guides/_form.html.erb b/app/views/admin/detailed_guides/_form.html.erb
@@ -19,12 +19,13 @@
           id: "edition_related_detailed_guide_ids",
           name: "edition[related_detailed_guide_ids][]",
           error_items: errors_for(edition.errors, :related_detailed_guide_ids),
+          include_blank: true,
           label: {
             text: "Related guides",
             heading_size: "m",
           },
           select: {
-            options: [""] + taggable_detailed_guides_container,
+            options: taggable_detailed_guides_container,
             multiple: true,
             selected: edition.related_detailed_guide_ids,
           },

diff --git a/app/views/admin/editions/_appointment_fields.html.erb b/app/views/admin/editions/_appointment_fields.html.erb
@@ -2,12 +2,13 @@
   <%= render "components/autocomplete", {
     id: "edition_role_appointment_ids",
     name: "edition[role_appointment_ids][]",
+    include_blank: true,
     label: {
       text: "Ministers",
       heading_size: "m",
     },
     select: {
-      options: [""] + taggable_ministerial_role_appointments_container,
+      options: taggable_ministerial_role_appointments_container,
       multiple: true,
       selected: edition.role_appointment_ids,
     },

diff --git a/app/views/admin/editions/_organisation_fields.html.erb b/app/views/admin/editions/_organisation_fields.html.erb
@@ -32,14 +32,15 @@
       <%= render "components/autocomplete", {
         id: "edition_supporting_organisation_ids",
         name: "edition[supporting_organisation_ids][]",
+        include_blank: true,
         label: {
           text: "Supporting organisations",
           heading_size: "m",
         },
         select: {
           multiple: true,
           selected: edition.edition_organisations.reject(&:lead?).map(&:organisation_id),
-          options: [""] + taggable_organisations_container,
+          options: taggable_organisations_container,
         },
       } %>
     <% end %>

diff --git a/app/views/admin/editions/_statistical_data_set_fields.html.erb b/app/views/admin/editions/_statistical_data_set_fields.html.erb
@@ -2,12 +2,13 @@
   <%= render "components/autocomplete", {
     id: "edition_statistical_data_set_document_ids",
     name: "edition[statistical_data_set_document_ids][]",
+    include_blank: true,
     label: {
       text: "Statistical data sets",
       heading_size: "m",
     },
     select: {
-      options: [""] + taggable_statistical_data_sets_container,
+      options: taggable_statistical_data_sets_container,
       multiple: true,
       selected: edition.statistical_data_set_document_ids,
     },

diff --git a/app/views/admin/editions/_topical_event_fields.html.erb b/app/views/admin/editions/_topical_event_fields.html.erb
@@ -2,12 +2,13 @@
   <%= render "components/autocomplete", {
     id: "edition_topical_event_ids",
     name: "edition[topical_event_ids][]",
+    include_blank: true,
     label: {
       text: "Topical events",
       heading_size: "m",
     },
     select: {
-      options: [""] + TopicalEvent.order(:name).map { |topical_event| [topical_event.name, topical_event.id]},
+      options: TopicalEvent.order(:name).map { |topical_event| [topical_event.name, topical_event.id]},
       multiple: true,
       selected: edition.topical_event_ids,
     },

diff --git a/app/views/admin/editions/_worldwide_organisation_fields.html.erb b/app/views/admin/editions/_worldwide_organisation_fields.html.erb
@@ -5,12 +5,13 @@
     id: "edition_worldwide_organisation_document_ids",
     name: "edition[worldwide_organisation_document_ids][]",
     error_items: errors_for(edition.errors, :worldwide_organisations),
+    include_blank: true,
     label: {
       text:  "Worldwide organisations" + "#{' (required)' if required}",
       heading_size: "m",
     },
     select: {
-      options: [""] + taggable_worldwide_organisations_container,
+      options: taggable_worldwide_organisations_container,
       multiple: true,
       selected: edition.worldwide_organisation_document_ids,
     },

diff --git a/app/views/admin/needs/edit.html.erb b/app/views/admin/needs/edit.html.erb
@@ -8,14 +8,15 @@
       <%= render "components/autocomplete", {
           id: "need_ids",
           name: "need_ids[]",
+          include_blank: true,
           label: {
             text: "Select associated user needs",
             bold: true,
             required: true,
           },
           heading_size: "l",
           select: {
-            options: [""] + taggable_needs_container,
+            options: taggable_needs_container,
             multiple: true,
             selected: @document.need_ids,
           },

diff --git a/app/views/admin/organisations/_closed_fields.html.erb b/app/views/admin/organisations/_closed_fields.html.erb
@@ -47,18 +47,18 @@
 <%= render "components/autocomplete", {
   id: "organisation_superseding_organisation_ids",
   name: "organisation[superseding_organisation_ids][]",
+  include_blank: true,
   label: {
     text: "Superseding organisations",
     heading_size: "m",
   },
   select: {
-    options: [""] +
-      (Organisation.with_translations(:en) - [organisation]).map do |org|
-        [
-          org.name,
-          org.id,
-        ]
-      end,
+    options: (Organisation.with_translations(:en) - [organisation]).map do |org|
+               [
+                 org.name,
+                 org.id,
+               ]
+             end,
     multiple: true,
     selected: organisation.superseding_organisation_ids,
   },

diff --git a/app/views/admin/organisations/_form.html.erb b/app/views/admin/organisations/_form.html.erb
@@ -246,13 +246,12 @@
         heading_size: "m",
       },
       select: {
-        options: [""] +
-          (Organisation.with_translations(:en) - [organisation]).map do |org|
-            [
-              org.name,
-              org.id,
-            ]
-          end,
+        options: (Organisation.with_translations(:en) - [organisation]).map do |org|
+                   [
+                     org.name,
+                     org.id,
+                   ]
+                 end,
         multiple: true,
         selected: organisation.parent_organisation_ids,
       },

diff --git a/app/views/admin/users/edit.html.erb b/app/views/admin/users/edit.html.erb
@@ -8,14 +8,15 @@
       <%= render "components/autocomplete", {
         id: "user_world_location_ids",
         name: "user[world_location_ids][]",
+        include_blank: true,
         label: {
           text: "Locations",
           heading_size: "l",
         },
         select: {
           multiple: true,
           selected: form.object.world_location_ids,
-          options: [""] + WorldLocation.all.map { |l| [l.name, l.id] },
+          options: WorldLocation.all.map { |l| [l.name, l.id] },
         },
       } %>
       <div class="govuk-button-group">

diff --git a/app/views/components/_autocomplete.html.erb b/app/views/components/_autocomplete.html.erb
@@ -4,6 +4,7 @@
   error_items ||= []
   aria = error_id if error_items.any?
   select ||= {}
+  include_blank ||= false
   autocomplete_configuration_options ||= {
     showAllValues: true,
   }
@@ -38,7 +39,10 @@
   <% end %>
 
   <%= select_tag name,
-    options_for_select(select[:options], select[:selected]),
+    options_for_select(
+      include_blank ? ([""] + select[:options]) : select[:options],
+      select[:selected],
+    ),
     id: id,
     class: "govuk-select",
     size: select[:size],

diff --git a/app/views/components/docs/autocomplete.yml b/app/views/components/docs/autocomplete.yml
@@ -17,7 +17,24 @@ examples:
       select:
         options:
           -
-            -
+            - France
+            - fr
+          -
+            - Germany
+            - de
+          -
+            - United Kingdom
+            - uk
+
+  with_blank_option:
+    data:
+      id: autocomplete
+      name: autocomplete
+      include_blank: true
+      label:
+        text: Select your country
+      select:
+        options:
           -
             - France
             - fr
@@ -101,8 +118,6 @@ examples:
         text: Select your country
       select:
         options:
-          -
-            -
           -
             - France
             - fr

diff --git a/...content_block_manager/app/views/content_block_manager/content_block/shared/_form.html.erb b/...content_block_manager/app/views/content_block_manager/content_block/shared/_form.html.erb
@@ -30,12 +30,13 @@
     id: "#{parent_class}_lead_organisation",
     name: "content_block/edition[organisation_id]",
     error_items: errors_for(@form.content_block_edition.errors, "lead_organisation".to_sym),
+    include_blank: true,
     label: {
       text: "Lead organisation",
     },
     select: {
       multiple: false,
-      options: [""] + taggable_organisations_container,
+      options: taggable_organisations_container,
       selected: @form.content_block_edition.edition_organisation&.organisation_id,
     },
   } %>

diff --git a/test/components/autocomplete_test.rb b/test/components/autocomplete_test.rb
@@ -14,7 +14,6 @@ def component_data
       },
       select: {
         options: [
-          [""],
           ["France", "fr"],
           ["Germany", "de"],
           ["United Kingdom", "uk"],
@@ -43,6 +42,13 @@ def component_data
     assert_select ".app-c-autocomplete .govuk-select option[value='de'][selected='selected']"
   end
 
+  test "renders with a blank option" do
+    data = component_data
+    data[:include_blank] = true
+    render_component(data)
+    assert_select ".app-c-autocomplete .govuk-select option[value='']"
+  end
+
   test "renders with an error" do
     data = component_data
     data[:error_items] = [