Replace twitter-typeahead-rails with @github/auto-complete-element

This is less code for us to manage and is a library that is currently receiving maintenance
projectblacklight · Dec 6, 2021 · 76e8833 · 76e8833
1 parent b110de0
commit 76e8833
Show file tree

Hide file tree

Showing 16 changed files with 69 additions and 116 deletions.
diff --git a/.rubocop.yml b/.rubocop.yml
@@ -229,6 +229,7 @@ RSpec/DescribeClass:
   Exclude:
     - 'spec/lib/tasks/blacklight_task_spec.rb'
     - 'spec/features/**/*'
+    - 'spec/requests/**/*'
     - 'spec/views/**/*'
 RSpec/ExcessiveDocstringSpacing: # new in 2.5
   Enabled: true

diff --git a/app/assets/javascripts/blacklight/blacklight.js b/app/assets/javascripts/blacklight/blacklight.js
diff --git a/app/assets/javascripts/blacklight/blacklight.js.map b/app/assets/javascripts/blacklight/blacklight.js.map
diff --git a/app/assets/stylesheets/blacklight/_autocomplete.scss b/app/assets/stylesheets/blacklight/_autocomplete.scss
@@ -0,0 +1,21 @@
+auto-complete [aria-selected="true"],
+auto-complete [role="option"]:hover {
+  background-color: $dropdown-link-hover-bg;
+}
+auto-complete {
+  position: relative;
+  flex-grow: 3;
+
+  ul {
+    list-style-type: none;
+    position: absolute;
+    background-color: $dropdown-bg;
+    padding-left: 0;
+    border: 1px solid $dropdown-border-color;
+    border-radius: $dropdown-border-radius;
+  }
+
+  [role="option"]{
+    padding: 0.25rem 1.5rem;
+  }
+}
diff --git a/app/assets/stylesheets/blacklight/_blacklight_base.scss b/app/assets/stylesheets/blacklight/_blacklight_base.scss
@@ -24,3 +24,4 @@
 @import "modal";
 @import "twitter_typeahead";
 @import "icons";
+@import "autocomplete";
diff --git a/app/components/blacklight/search_bar_component.html.erb b/app/components/blacklight/search_bar_component.html.erb
@@ -18,7 +18,20 @@
     <% end %>
 
     <label for="<%= @prefix %><%= @query_param %>" class="sr-only visually-hidden"><%= scoped_t('search.label') %></label>
-    <%= text_field_tag @query_param, @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control rounded-#{@search_fields.length > 1 ? '0' : 'left'}", id: "#{@prefix}q", autocomplete: autocomplete_path.present? ? "off" : "", autofocus: @autofocus, data: { autocomplete_enabled: autocomplete_path.present?, autocomplete_path: autocomplete_path }  %>
+
+    <% if autocomplete_path.present? %>
+      <auto-complete src="<%= autocomplete_path %>" for="autocomplete-popup">
+        <%= text_field_tag @query_param, @q, placeholder: scoped_t('search.placeholder'),
+            class: "search-q q form-control rounded-#{@search_fields.length > 1 ? '0' : 'left'}",
+            id: "#{@prefix}q", autofocus: @autofocus %>
+
+        <ul id="autocomplete-popup"></ul>
+      </auto-complete>
+    <% else %>
+      <%= text_field_tag @query_param, @q, placeholder: scoped_t('search.placeholder'),
+          class: "search-q q form-control rounded-#{@search_fields.length > 1 ? '0' : 'left'}",
+          id: "#{@prefix}q", autofocus: @autofocus %>
+    <% end %>
 
     <span class="input-group-append">
       <%= append %>

diff --git a/app/controllers/concerns/blacklight/catalog.rb b/app/controllers/concerns/blacklight/catalog.rb
@@ -110,12 +110,10 @@ def opensearch
     end
   end
 
+  # Returns the dropdown list for autocomplete
   def suggest
-    respond_to do |format|
-      format.json do
-        render json: suggestions_service.suggestions
-      end
-    end
+    @suggestions = suggestions_service.suggestions
+    render 'suggest', layout: false
   end
 
   # @return [Array] first value is a Blacklight::Solr::Response and the second

diff --git a/app/javascript/blacklight/autocomplete.js b/app/javascript/blacklight/autocomplete.js
diff --git a/app/javascript/blacklight/index.js b/app/javascript/blacklight/index.js
@@ -1,4 +1,3 @@
-import Autocomplete from './autocomplete'
 import BookmarkToggle from './bookmark_toggle'
 import ButtonFocus from './button_focus'
 import FacetLoad from './facet_load'
@@ -7,7 +6,6 @@ import SearchContext from './search_context'
 import Core from './core'
 
 export default {
-  Autocomplete,
   BookmarkToggle,
   ButtonFocus,
   FacetLoad,

diff --git a/app/views/catalog/suggest.html.erb b/app/views/catalog/suggest.html.erb
@@ -0,0 +1,3 @@
+<% @suggestions.each do |suggestion| %>
+  <li role="option"><span><%= suggestion['term'] %></span></li>
+<% end %>
diff --git a/app/views/layouts/blacklight/base.html.erb b/app/views/layouts/blacklight/base.html.erb
@@ -15,6 +15,9 @@
     <%= javascript_include_tag "application" %>
     <%= csrf_meta_tags %>
     <%= content_for(:head) %>
+    <script type="module">
+      import githubAutoCompleteElement from 'https://cdn.skypack.dev/@github/auto-complete-element';
+    </script>
   </head>
   <body class="<%= render_body_class %>">
     <nav id="skip-link" role="navigation" aria-label="<%= t('blacklight.skip_links.label') %>">

diff --git a/lib/blacklight/routes/searchable.rb b/lib/blacklight/routes/searchable.rb
@@ -15,7 +15,7 @@ def call(mapper, _options = {})
         mapper.get ":id/raw", action: 'raw', as: 'raw', defaults: { format: 'json' }
 
         mapper.get "opensearch"
-        mapper.get 'suggest', as: 'suggest_index', defaults: { format: 'json' }
+        mapper.get 'suggest', as: 'suggest_index'
         mapper.get "facet/:id", action: 'facet', as: 'facet'
       end
     end

diff --git a/lib/generators/blacklight/assets_generator.rb b/lib/generators/blacklight/assets_generator.rb
@@ -9,7 +9,6 @@ class Assets < Rails::Generators::Base
     # This could be skipped if you want to use webpacker
     def add_javascript_dependencies
       gem 'bootstrap', options[:'bootstrap-version']
-      gem 'twitter-typeahead-rails', '0.11.1.pre.corejavascript'
       gem 'jquery-rails'
     end
 
@@ -37,8 +36,6 @@ def assets
           //
           // Required by Blacklight
           //= require popper
-          // Twitter Typeahead for autocomplete
-          //= require twitter/typeahead
           //= require bootstrap
           //= require blacklight/blacklight
         CONTENT

diff --git a/spec/controllers/catalog_controller_spec.rb b/spec/controllers/catalog_controller_spec.rb
@@ -467,20 +467,6 @@ def export_as_mock
     end
   end
 
-  describe 'GET suggest' do
-    it 'returns JSON' do
-      get :suggest, params: { format: 'json' }
-      expect(response.body).to eq [].to_json
-    end
-
-    it 'returns suggestions' do
-      get :suggest, params: { format: 'json', q: 'new' }
-      json = JSON.parse(response.body)
-      expect(json.count).to eq 5
-      expect(json.first['term']).to eq 'new jersey'
-    end
-  end
-
   describe "email/sms" do
     before do
       mock_document.extend(Blacklight::Document::Sms)

diff --git a/spec/features/autocomplete_spec.rb b/spec/features/autocomplete_spec.rb
@@ -3,6 +3,6 @@
 RSpec.describe 'Autocomplete suggestions' do
   it 'search form has suggest path' do
     visit root_path
-    expect(page).to have_css 'input[data-autocomplete-path="/catalog/suggest"]'
+    expect(page).to have_css 'auto-complete[src="/catalog/suggest"]'
   end
 end
diff --git a/spec/requests/load_suggestions_spec.rb b/spec/requests/load_suggestions_spec.rb
@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'GET /catalog/suggest' do
+  it 'returns suggestions' do
+    get '/catalog/suggest?q=new'
+    expect(response.body).to eq <<-RESULT
+  <li role="option"><span>new jersey</span></li>
+  <li role="option"><span>new jersey bridgeton biography</span></li>
+  <li role="option"><span>new jersey bridgeton history</span></li>
+  <li role="option"><span>new york</span></li>
+  <li role="option"><span>nuwākshūṭ</span></li>
+    RESULT
+  end
+end