Accessible autocomplete: Only enhance select element once (#182)

* Only enhance select element once

* Add test for disabled select option

* Select by key

* Test for selected option

* Rubocop

* Instance vars

* Don't turbo cache page to make js function act each time

app/controllers/form_controller.rb

@@ -5,14 +5,14 @@ class FormController < ApplicationController
 
   def submit_form
     if @case_log
-      page = @case_log.form.get_page(params[:case_log][:page])
+      @page = @case_log.form.get_page(params[:case_log][:page])
-      responses_for_page = responses_for_page(page)
+      responses_for_page = responses_for_page(@page)
       if @case_log.update(responses_for_page) && @case_log.has_no_unresolved_soft_errors?
-        redirect_path = @case_log.form.next_page_redirect_path(page, @case_log)
+        redirect_path = @case_log.form.next_page_redirect_path(@page, @case_log)
         redirect_to(send(redirect_path, @case_log))
       else
-        subsection = @case_log.form.subsection_for_page(page)
+        @subsection = @case_log.form.subsection_for_page(@page)
-        render "form/page", locals: { page: page, subsection: subsection.label }, status: :unprocessable_entity
+        render "form/page", status: :unprocessable_entity
       end
     else
       render_not_found
@@ -33,9 +33,9 @@ class FormController < ApplicationController
     form.pages.map do |page|
       define_method(page.id) do |_errors = {}|
         if @case_log
-          subsection = @case_log.form.subsection_for_page(page)
+          @subsection = @case_log.form.subsection_for_page(page)
-          case_log_form_page = @case_log.form.get_page(page.id)
+          @page = @case_log.form.get_page(page.id)
-          render "form/page", locals: { page: case_log_form_page, subsection: subsection.label }
+          render "form/page"
         else
           render_not_found
         end

app/views/form/_select_question.html.erb

@@ -1,3 +1,4 @@
+<% selected = CaseLog::UK_LA[@case_log.public_send(question.id)] || "" %>
 <%= answers = question.answer_options.map { |key, value| OpenStruct.new(id: key, name: value) }
  f.govuk_collection_select question.id.to_sym,
     answers,
@@ -6,6 +7,6 @@
     caption: caption && !page_header.present? ? { text: caption.html_safe, size: "l" } : nil,
     label: { text: question.header, size: !page_header.present? ? "l" : "m", tag: !page_header.present? ? "h1" : "h2" },
     hint: { text: question.hint_text&.html_safe },
-    options: { disabled: [""], selected: @case_log.public_send(question.id) || "" },
+    options: { disabled: [""], selected: selected },
     "data-controller": "accessible-autocomplete"
  %>

app/views/form/page.html.erb

@@ -1,4 +1,8 @@
-<% content_for :title, page.header.present? ? page.header : page.questions.first().header.html_safe %>
+<% content_for :head do %>
+  <meta name="turbo-cache-control" content="no-cache">
+<% end %>
+
+<% content_for :title, @page.header.present? ? @page.header : @page.questions.first().header.html_safe %>
 
 <% content_for :before_content do %>
   <%= govuk_back_link(
@@ -10,26 +14,26 @@
 <%= turbo_frame_tag "case_log_form", target: "_top" do %>
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds-from-desktop">
-      <% if page.header.present? %>
+      <% if @page.header.present? %>
         <h1 class="govuk-heading-l">
-          <span class="govuk-caption-l"><%= subsection %></span>
+          <span class="govuk-caption-l"><%= @subsection.label %></span>
-          <%= page.header %>
+          <%= @page.header %>
         </h1>
       <% end %>
 
       <%= form_with model: @case_log, url: form_case_log_path(@case_log), method: "post" do |f| %>
         <%= f.govuk_error_summary %>
-        <% page.questions.map do |question| %>
+        <% @page.questions.map do |question| %>
-          <div id=<%= question.id + "_div " %><%= display_question_key_div(page, question) %> >
+          <div id=<%= question.id + "_div " %><%= display_question_key_div(@page, question) %> >
-            <%= render partial: "form/#{question.type}_question", locals: { question: question, caption: subsection, page_header: page.header, f: f } %>
+            <%= render partial: "form/#{question.type}_question", locals: { question: question, caption: @subsection.label, page_header: @page.header, f: f } %>
           </div>
         <% end %>
 
-        <% if page.has_soft_validations? %>
+        <% if @page.has_soft_validations? %>
-          <%= render partial: "form/validation_override_question", locals: { f: f, page: page } %>
+          <%= render partial: "form/validation_override_question", locals: { f: f, page: @page } %>
         <% end %>
 
-        <%= f.hidden_field :page, value: page.id %>
+        <%= f.hidden_field :page, value: @page.id %>
         <%= f.govuk_submit "Save and continue"  %>
       <% end %>
     </div>

app/views/layouts/application.html.erb

@@ -15,6 +15,10 @@
     <%= favicon_link_tag asset_pack_path('media/images/govuk-apple-touch-icon-180x180.png'), rel: 'apple-touch-icon', type: 'image/png', size: '180x180' %>
     <%= stylesheet_pack_tag 'application', media: 'all' %>
     <%= javascript_pack_tag 'application', defer: true %>
+
+    <% if content_for?(:head) %>
+      <%= yield(:head) %>
+    <% end %>
     <%= capybara_lockstep if defined?(Capybara::Lockstep) %>
 
     <% if Rails.env.development? %>

app/webpacker/controllers/accessible_autocomplete_controller.js

@@ -3,6 +3,7 @@ import accessibleAutocomplete from "accessible-autocomplete"
 import 'accessible-autocomplete/dist/accessible-autocomplete.min.css'
 
 export default class extends Controller {
+
   connect() {
     accessibleAutocomplete.enhanceSelectElement({
       defaultValue: '',

spec/features/form/accessible_autocomplete_spec.rb

@@ -24,4 +24,23 @@ RSpec.describe "Accessible Automcomplete" do
     find("#case-log-la-field").click.native.send_keys("T", "h", "a", "n", :down, :enter)
     expect(find("#case-log-la-field").value).to eq("Thanet")
   end
+
+  it "maintains enhancement state across back navigation", js: true do
+    visit("/logs/#{case_log.id}/accessible-select")
+    find("#case-log-la-field").click.native.send_keys("T", "h", "a", "n", :down, :enter)
+    click_button("Save and continue")
+    click_link(text: "Back")
+    expect(page).to have_selector("input", class: "autocomplete__input", count: 1)
+  end
+
+  it "has a disabled null option" do
+    visit("/logs/#{case_log.id}/accessible-select")
+    expect(page).to have_select("case-log-la-field", disabled_options: ["Select an option"])
+  end
+
+  it "has the correct option selected if one has been saved" do
+    case_log.update!(property_postcode: nil, la: "Oxford")
+    visit("/logs/#{case_log.id}/accessible-select")
+    expect(page).to have_select("case-log-la-field", selected: %w[Oxford])
+  end
 end

spec/fixtures/forms/2021_2022.json

@@ -193,11 +193,12 @@
                     "type": "select",
                     "check_answer_label": "Accessible Select",
                     "answer_options": {
-                      "0": "Adur",
+                      "" : "Select an option",
-                      "1": "Lewisham",
+                      "E07000223": "Adur",
-                      "2": "Oxford",
+                      "E09000023": "Lewisham",
-                      "3": "Thanet",
+                      "E07000178": "Oxford",
-                      "4": "York"
+                      "E07000114": "Thanet",
+                      "E06000014": "York"
                     }
                   }
                 }