Refactor Search Frontend

Reduce the need for custom javascript by leveraging Turbo and HTML conventions:

- By using a form, Turbo handles submission for us and fires events we can use to toggle the loading icon.
- Use css to handle display of loading icon

app/assets/stylesheets/application.postcss.css

@@ -43,6 +43,7 @@
 @import 'components/nav.css';
 @import 'components/action_bar.css';
 @import 'components/table.css';
+@import 'components/search.css';
 
 @import 'utilities/display.css';
 @import 'utilities/spacing.css';

app/assets/stylesheets/components/search.css

@@ -0,0 +1,7 @@
+.c-search .c-loader {
+  display: none;
+}
+
+.c-search.loading .c-loader {
+  display: revert;
+}

app/javascript/controllers/search_controller.js

@@ -1,36 +1,30 @@
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-  static targets = ['loader', 'input'];
+  static targets = ['input'];
 
   connect() {
-    this.inputTarget.value = this.inputTarget.getAttribute('value');
+    this.moveCursorToEnd();
   }
 
-  disconnect() {
-    this.loaderTarget.classList.add('u-display-none');
-    this.inputTarget.value = '';
+  moveCursorToEnd() {
+    const searchValueLength = this.inputTarget.value.length;
+    if (searchValueLength > 0) {
+      this.inputTarget.focus();
+      this.inputTarget.setSelectionRange(searchValueLength, searchValueLength);
+    }
   }
 
-  query(event) {
-    const query = event.target.value.trim();
+  submit(e) {
+    this.inputTarget.value = this.inputTarget.value.trim();
 
-    if (event.key != 'Enter' || query == '') { return; }
-
-    this.loaderTarget.classList.remove('u-display-none');
-    const queryUrl = `/search${query ? `?query=${query}` : ''}`;
-
-    Turbo.visit(queryUrl);
-    this._focusInput();
+    if (this.inputTarget.value.length === 0) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
   }
 
-  _focusInput() {
-    document.addEventListener('turbo:load', () => {
-      const searchElement = document.querySelector('#js-search-input');
-      const searchValueLength = searchElement.value.length;
-
-      searchElement.focus();
-      searchElement.setSelectionRange(searchValueLength, searchValueLength);
-    }, { once: true });
+  loading(e) {
+    this.element.classList.toggle('loading', e.type == 'turbo:submit-start');
   }
 }

app/views/shared/_search_bar.html.erb

@@ -1,12 +1,17 @@
-<div class='c-input-group o-grid__item' data-controller='search' span@medium='2-6' span='3-5'>
-  <div class='c-input-group__icon'>
-    <%= icon_tag 'search', size: 'large' %>
-  </div>
-  <input id='js-search-input' class='c-input' data-search-target='input' data-action='keydown->search#query' data-test-id='search_input' value='<%= params[:query] %>' />
-  <div class='c-input-group__icon u-display-none' data-search-target='loader'>
-    <%= loader_tag size: 'small' %>
-  </div>
-</div>
+<%= form_tag search_path, method: :get, class: 'c-search c-input-group o-grid__item',
+            'span@medium': '2-6', span: '3-5',
+             data: { action: 'turbo:submit-start->search#loading turbo:submit-end->search#loading search#submit',
+                     controller: 'search' } do %>
+    <div class='c-input-group__icon'>
+      <%= icon_tag 'search', size: 'large' %>
+    </div>
+    <%= text_field_tag 'query', params[:query], class: 'c-input',
+                       data: { search_target: 'input', test_id: 'search_input' } %>
+    <div class='c-input-group__icon'>
+      <%= loader_tag size: 'small' %>
+    </div>
+<% end %>
+
 <div class='o-grid__item o-grid__item--justify-end' span@medium='7-7' span='6-7'>
   <div data-controller='dropdown' class='c-dropdown' data-test-id='search_bar_menu'>
     <span data-action='click->dropdown#show'><%= avatar_tag Current.user %></span>

test/system/search_test.rb

@@ -8,14 +8,14 @@ class SearchSystemTest < ApplicationSystemTestCase
   end
 
   test "show search results" do
-    fill_in "search_input", with: "artist"
+    fill_in "query", with: "artist"
     find(:test_id, "search_input").send_keys(:enter)
 
     assert_text('Search results for "artist"')
   end
 
   test "can not request search when query text is empty" do
-    fill_in "search_input", with: ""
+    fill_in "query", with: ""
     find(:test_id, "search_input").send_keys(:enter)
 
     assert_no_text('Search results for "artist"')