WIP Use autocomplete on all organisation fields

This was previously added to the organisation field on the page to invite a new user to Signon. This adds it to other pages that have an organisations field TODO: integration tests if needed (simple ones to say it works with JavaScript)
alphagov · Sep 26, 2024 · 5620919 · 5620919
1 parent fd16228
commit 5620919
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 10 deletions.
diff --git a/app/views/account/organisations/edit.html.erb b/app/views/account/organisations/edit.html.erb
@@ -20,12 +20,23 @@
   <div class="govuk-grid-column-two-thirds">
     <% if policy(%i[account organisations]).update? %>
       <%= form_for current_user, url: account_organisation_path do |f| %>
-        <%= render "govuk_publishing_components/components/select", {
+        <div data-module="accessible-autocomplete">
+          <%= render "govuk_publishing_components/components/select", {
             id: "user_organisation_id",
             name: "user[organisation_id]",
             label: "Organisation",
             options: options_for_your_organisation_select(current_user)
+          } %>
+
+          <div class="govuk-button-group">
+            <%= render "govuk_publishing_components/components/button", {
+              text: "Clear selection",
+              type: "button",
+              classes: "js-autocomplete__clear-button",
+              secondary_solid: true
             } %>
+          </div>
+        </div>
         <%= render "govuk_publishing_components/components/button", {
           text: "Change organisation"
         } %>

diff --git a/app/views/batch_invitations/new.html.erb b/app/views/batch_invitations/new.html.erb
@@ -66,13 +66,23 @@
           column, or the value is blank for a row, the user will be
           assigned to this organisation instead."  } %>
 
-      <%= render "govuk_publishing_components/components/select", {
+      <div data-module="accessible-autocomplete">
+        <%= render "govuk_publishing_components/components/select", {
           id: "batch_invitation_organisation_id",
           name: "batch_invitation[organisation_id]",
           label: "Organisation",
           options: policy_scope(Organisation).not_closed.order(:name).map { |organisation| { text: organisation.name_with_abbreviation, value: organisation.id } }
-          } %>
+        } %>
 
+        <div class="govuk-button-group">
+          <%= render "govuk_publishing_components/components/button", {
+            text: "Clear selection",
+            type: "button",
+            classes: "js-autocomplete__clear-button",
+            secondary_solid: true
+          } %>
+        </div>
+      </div>
     <% end %>
 
     <%= render "govuk_publishing_components/components/button", {

diff --git a/app/views/users/organisations/edit.html.erb b/app/views/users/organisations/edit.html.erb
@@ -38,13 +38,24 @@
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
     <%= form_for @user, url: user_organisation_path(@user) do %>
-      <%= render "govuk_publishing_components/components/select", {
-        id: "user_organisation_id",
-        name: "user[organisation_id]",
-        label: "Organisation",
-        options: options_for_organisation_select(selected: @user.organisation_id),
-        error_message: @user.errors[:organisation_id].any? ? @user.errors.full_messages_for(:organisation_id).to_sentence : nil
-      } %>
+      <div data-module="accessible-autocomplete">
+        <%= render "govuk_publishing_components/components/select", {
+          id: "user_organisation_id",
+          name: "user[organisation_id]",
+          label: "Organisation",
+          options: options_for_organisation_select(selected: @user.organisation_id),
+          error_message: @user.errors[:organisation_id].any? ? @user.errors.full_messages_for(:organisation_id).to_sentence : nil
+        } %>
+
+        <div class="govuk-button-group">
+          <%= render "govuk_publishing_components/components/button", {
+            text: "Clear selection",
+            type: "button",
+            classes: "js-autocomplete__clear-button",
+            secondary_solid: true
+          } %>
+        </div>
+      </div>
       <div class="govuk-button-group">
         <%= render "govuk_publishing_components/components/button", {
           text: "Change organisation",