Fix autocomplete JavaScript call (#86)

Fixes a regression in the JavaScript call for autocomplete elements that transformed the surrounding quotes to HTML entities therefore causing errors.

Author: rubenarakelyan

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    govuk-design-system-rails (0.10.2)
+    govuk-design-system-rails (0.10.3)
 
 GEM
   remote: https://rubygems.org/

README.md

@@ -14,7 +14,7 @@ You **must** include the [govuk-frontend](https://github.com/alphagov/govuk-fron
 
 | This gem's version | Compatible with `govuk-frontend` version |
 |--------------------| --- |
-| 0.10.2             | 4.3.1 |
+| 0.9.7              | 4.3.1 |
 | 0.9.0              | 4.1.0 |
 | 0.8.2              | 3.14.0 |
 

app/views/components/_govuk_select.html.erb

@@ -96,10 +96,11 @@
         </svg>
       </button>
     <% end %>
+
     <script nonce="true">
-      //<![CDATA[
-        window.callAutocompleteWhenReady(<%= local_assigns[:id].to_json %>, { showAllValues: <%= local_assigns[:show_all_values].to_json %> });
-      //]]>
+      // <![CDATA[
+        window.callAutocompleteWhenReady(<%= local_assigns[:id].to_json.html_safe %>, { showAllValues: <%= local_assigns[:show_all_values].to_json.html_safe %> });
+      // ]]>
     </script>
   <% else %>
     <%= select %>

govuk-design-system-rails.gemspec

@@ -2,7 +2,7 @@ $LOAD_PATH.push File.expand_path("lib", __dir__)
 
 Gem::Specification.new do |s|
   s.name = "govuk-design-system-rails"
-  s.version = "0.10.2"
+  s.version = "0.10.3"
   s.authors = %w[govuk-ruby]
   s.summary = "An implementation of the govuk-frontend macros in Ruby on Rails"
   s.homepage = "https://github.com/govuk-ruby/govuk-design-system-rails"

spec/helpers/govuk_design_system/select_helper_spec.rb

@@ -81,5 +81,56 @@
         </div>
       HTML
     end
+
+    it "returns the correct HTML when the select element is an autocomplete element" do
+      html = helper.govukSelect({
+        id: "sort",
+        name: "sort",
+        label: {
+          text: "Sort by"
+        },
+        items: [
+          {
+            value: "published",
+            text: "Recently published"
+          },
+          {
+            value: "updated",
+            text: "Recently updated",
+            selected: true
+          },
+          {
+            value: "views",
+            text: "Most views"
+          },
+          {
+            value: "comments",
+            text: "Most comments"
+          }
+        ],
+        is_autocomplete: true
+      })
+
+      expect(html).to match_html(<<~HTML)
+        <div class="govuk-form-group">
+          <label class="govuk-label" for="sort">
+            Sort by
+          </label>
+          <div class="">
+            <select class="govuk-select" id="sort" name="sort">
+              <option value="published">Recently published</option>
+              <option value="updated" selected="selected">Recently updated</option>
+              <option value="views">Most views</option>
+              <option value="comments">Most comments</option>
+            </select>
+          </div>
+            <script nonce="true">
+            // <![CDATA[
+              window.callAutocompleteWhenReady("sort", { showAllValues: null });
+            // ]]>
+          </script>
+        </div>
+      HTML
+    end
   end
 end