Merge pull request #271 from joyofrails/feat/iterate-combobox

Feat/iterate combobox

Author: rossta

app/controllers/searches_controller.rb

@@ -2,34 +2,47 @@
 
 class SearchesController < ApplicationController
   rescue_from Searches::ParseFailed do |error|
+    query = params.fetch(:query, "")
+
     respond_to do |format|
-      format.html { render Searches::ShowView.new(pages: [], query: params[:query]) }
+      format.html { render Searches::ShowView.new(query:, name:) }
       format.turbo_stream {
         render turbo_stream: [
-          turbo_stream.replace("search-listbox", Searches::Listbox.new(pages: [], query: params[:query]))
+          turbo_stream.replace(Searches::Listbox.dom_id(name), Searches::Listbox.new(query:, name:))
         ]
       }
     end
   end
 
   def show
-    raw_query = params[:query] || ""
-    pages = if raw_query.present?
-      query = Searches::Query.parse!(raw_query)
-      Page.search("#{query}*").with_snippets.ranked.limit(3)
+    results = if query.present?
+      parsed_query = Searches::Query.parse!(query)
+      Page.search("#{parsed_query}*").with_snippets.ranked.limit(3)
     else
       []
     end
 
     respond_to do |format|
-      format.html {
-        render Searches::ShowView.new(pages:, query: raw_query)
-      }
+      format.html { render Searches::ShowView.new(results:, query:) }
+
       format.turbo_stream {
         render turbo_stream: [
-          turbo_stream.replace("search-listbox", Searches::Listbox.new(pages: pages, query: raw_query))
+          turbo_stream.replace(
+            Searches::Listbox.dom_id(name),
+            Searches::Listbox.new(results:, query:, name:)
+          )
         ]
       }
     end
   end
+
+  private
+
+  def query
+    params.fetch(:query, "")
+  end
+
+  def name
+    params.fetch(:name, "search")
+  end
 end

app/javascript/controllers/dialog.js

@@ -32,11 +32,13 @@ export default class extends Controller {
   open() {
     console.log('Opening dialog');
     this.element.showModal();
+    this.dispatch('open');
   }
 
   close() {
     console.log('Closing dialog');
     this.element.close();
+    this.dispatch('close');
   }
 
   tryClose(event) {

app/javascript/controllers/forms/autosubmit.js

@@ -10,6 +10,10 @@ export default class extends Controller {
       type: Number,
       default: 0,
     },
+    mininumLength: {
+      type: Number,
+      default: 0,
+    },
   };
 
   connect() {
@@ -28,10 +32,14 @@ export default class extends Controller {
       return;
     }
 
-    if (event.target.value.length >= 3) {
+    if (event.target.value.length >= this.mininumLengthValue) {
       this.element.requestSubmit();
     } else {
-      console.log('Not submitting until 3 or more characters');
+      console.log(
+        'Not submitting until',
+        this.mininumLengthValue,
+        'characters',
+      );
     }
   }
 }

app/javascript/controllers/searches/combobox.js

@@ -20,8 +20,26 @@ function cyclingValueAt(array, index) {
 }
 
 export default class extends Controller {
+  static values = {
+    expanded: Boolean,
+  };
+
   connect() {
     console.log('Connected');
+
+    this.tryOpen();
+  }
+
+  // Many Comboboxes act like fancy select inputs for forms. The Search Combobox
+  // is currently hard-coded for for navigation: when an option is selected and
+  // enabled with Enter key, we expect it to have a anchor tag and follow its link.
+  go(event) {
+    let anchor = this.selectedItem?.querySelector('a');
+
+    if (anchor) {
+      this.close();
+      anchor.click();
+    }
   }
 
   selectIndex(index) {
@@ -55,13 +73,63 @@ export default class extends Controller {
     this.combobox.setAttribute('aria-activedescendant', id);
   }
 
-  listboxOpen({ detail }) {
-    console.log('Listbox open', this.options.length > 0);
-    this.combobox.setAttribute('aria-expanded', this.options.length > 0);
+  expandedValueChanged() {
+    console.log('Expanded value changed', this.expandedValue);
+    if (this.expandedValue) {
+      this.expand();
+    } else {
+      this.collapse();
+    }
   }
 
-  navigate(event) {
-    this.navigationKeyHandlers[event.key]?.call(this, event);
+  tryOpen() {
+    if (this.options.length > 0) {
+      this.open();
+    } else {
+      this.close();
+    }
+  }
+
+  open() {
+    this.expandedValue = true;
+  }
+
+  expand() {
+    console.log('Expand');
+    this.listbox.classList.remove('hidden');
+    this.combobox.setAttribute('aria-expanded', true);
+  }
+
+  close() {
+    this.expandedValue = false;
+  }
+
+  openInTarget(event) {
+    if (!event.target) return;
+
+    if (event.target.contains(this.element)) {
+      this.tryOpen();
+    }
+  }
+
+  closeInTarget(event) {
+    if (!event.target) return;
+
+    if (event.target.contains(this.element)) {
+      this.close();
+    }
+  }
+
+  collapse() {
+    console.log('Collapse');
+    this.combobox.setAttribute('aria-expanded', false);
+    this.listbox.classList.add('hidden');
+  }
+
+  closeAndBlur() {
+    this.close();
+    this.combobox.blur();
+    this.dispatch('close');
   }
 
   get options() {
@@ -84,6 +152,10 @@ export default class extends Controller {
     return this.element.querySelector('[role="listbox"]');
   }
 
+  navigate(event) {
+    this.navigationKeyHandlers[event.key]?.call(this, event);
+  }
+
   get navigationKeyHandlers() {
     return {
       ArrowDown: (event) => {
@@ -103,9 +175,13 @@ export default class extends Controller {
         cancel(event);
       },
       Enter: (event) => {
-        this.selectedItem?.querySelector('a')?.click();
+        this.go(event);
         cancel(event);
       },
+      Escape: (event) => {
+        this.closeAndBlur();
+        cancel(event); // Prevent ESC from clearing the search input as is the behavior in some browsers
+      },
     };
   }
 }

app/javascript/controllers/searches/combobox.spec.js

@@ -0,0 +1,76 @@
+import {
+  describe,
+  it,
+  expect,
+  render,
+  startStimulus,
+  screen,
+  userEvent,
+  beforeEach,
+} from '../../test/utils';
+
+import SearchCombobox from './combobox';
+
+import html from '../../test/fixtures/views/searches/combobox.html?raw';
+
+describe('Combobox', () => {
+  beforeEach(() => {
+    startStimulus('search-combobox', SearchCombobox);
+  });
+
+  it('should open the combobox', async () => {
+    const user = userEvent.setup();
+
+    await render(html);
+
+    const combobox = await screen.findByRole('combobox');
+    const listbox = await screen.findByRole('listbox');
+
+    expect(combobox).toHaveAttribute('aria-expanded');
+
+    user.click(combobox);
+
+    expect(combobox).toHaveAttribute('aria-expanded', 'true');
+    expect(listbox).not.toHaveClass('hidden');
+    expect(listbox).toBeVisible();
+  });
+
+  it('should close the combobox', async () => {
+    const user = userEvent.setup();
+
+    await render(html);
+
+    const combobox = await screen.findByRole('combobox');
+    const listbox = await screen.findByRole('listbox');
+
+    await user.click(combobox);
+    await user.keyboard('[Escape]');
+
+    expect(combobox).toHaveAttribute('aria-expanded', 'false');
+    expect(listbox).toHaveClass('hidden');
+  });
+
+  it('should select option', async () => {
+    const user = userEvent.setup();
+
+    await render(html);
+
+    const combobox = await screen.findByRole('combobox');
+
+    const option = await screen.findByRole('option', {
+      name: 'Introducing Joy of Rails',
+    });
+
+    await user.click(combobox);
+
+    // Select second option
+    await user.keyboard('[ArrowDown]');
+    await user.keyboard('[ArrowDown]');
+
+    expect(combobox).toHaveAttribute('aria-expanded', 'true');
+    expect(combobox).toHaveAttribute('aria-activedescendant', option.id);
+
+    expect(option).toHaveClass('selected');
+    expect(option).toHaveAttribute('aria-selected', 'true');
+  });
+});

app/javascript/test/fixtures/views/searches/combobox.html

@@ -0,0 +1,11 @@
+<div class="combobox grid gap-2" data-controller="search-combobox" data-action="
+            keydown->search-combobox#navigate
+            search-listbox:connected->search-combobox#tryOpen
+            dialog:close@window->search-combobox#closeInTarget
+            dialog:open@window->search-combobox#openInTarget
+          "><form data-controller="autosubmit-form" data-autosubmit-delay-value="300" data-autosubmit-minimum-length-value="3" data-turbo-frame="search" action="/search" accept-charset="UTF-8" method="post"><div class="flex items-center flex-row pl-2 col-gap-xs"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1200 1200" class="w-[32px] fill-current text-theme">
+  <path d="m1135.2 986.4-254.4-226.8c124.8-181.2 105.6-430.8-55.199-591.6-181.2-182.4-476.4-182.4-657.6 0-182.4 181.2-182.4 476.4 0 658.8 160.8 160.8 410.4 178.8 591.6 55.199l226.8 253.2c38.398 43.199 105.6 45.602 146.4 3.6016l6-6c40.801-40.801 39.598-108-3.6016-146.4zm-422.4-273.6c-120 120-313.2 120-432 0-120-120-120-313.2 0-432 120-120 313.2-120 432 0 120 120 120 313.2 0 432z"></path>
+</svg><label for="query" class="sr-only">Query</label> <input value="Rails" autofocus="autofocus" role="combobox" aria-expanded="false" aria-autocomplete="none" aria-controls="search-listbox" aria-owns="search-listbox" aria-haspopup="listbox" aria-activedescendant="" id="search-combobox" data-action="
+                  focus-&gt;combobox#tryOpen
+                  input-&gt;autosubmit-form#submit
+                " placeholder="Search Joy of Rails" class="w-full step-1" type="search" name="query" /></div><input value="search" autocomplete="off" type="hidden" name="name" id="name" /></form><ul id="search-listbox" role="listbox" class="grid" data-controller="search-listbox"><li aria-label="Here’the thing" role="option" id="search-option_search_result_articles-heres-the-thing" class="rounded"><a href="/articles/heres-the-thing"><div>Here’the thing</div><div>Ruby is a programming language</div></a></li><li aria-label="Introducing Joy of Rails" role="option" id="search-option_search_result_articles-joy-of-rails" class="rounded"><a href="/articles/joy-of-rails"><div>Introducing Joy of Rails</div><div>Rails is a web application framework</div></a></li></ul></div>

app/models/page.rb

@@ -31,4 +31,6 @@ def body_text
   def resource
     Sitepress.site.get(request_path)
   end
+
+  def url = request_path
 end

app/notifiers/newsletter_notifier.rb

@@ -50,7 +50,7 @@ def assert_test_recipients!
     test_recipients = User.test_recipients.pluck(:email)
 
     if recipients.any? { |user| test_recipients.exclude?(user.email) }
-      raise Error, "Attempted to deliver test newsletter to non-test recipients:  #{id}"
+      raise Error, "Attempted to deliver test newsletter to non-test recipients: #{id}"
     end
   end
 end

app/views/application/_dialog.html.erb

@@ -1 +1 @@
-<%= render Searches::Dialog.new unless current_page?(search_path) %>
+<%= render Searches::Dialog.new unless current_page?(search_path) || request.post? %>