Enhance the search combobox open/close behavior

This changeset improves the interactions for openingn and closing the
search combobox within the dialog.

- Adds open/close methods to change a new stimulus value "expandedValue"
- On change of "expandedValue", the aria-expanded value is changed and
  one of expand/collapse is called
- expand/collapse displays or hides the listbox, respectively
- adds cross-controller communication so when the dialog is opened or
  closed, the combobox open or close methods are called.

More:

Some browsers clear the focused search element when the ESC key is
pressed. now the search element won’t be cleared by the dialog will
close.

Now, when the dialog is closed, the current query is retained, so when
the dialog opens again, the search query is still present. I kind of
like this behavior, but it may not be the behavior some users expect.
Let’s see, maybe no one cares enough.

Author: rossta

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/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,61 @@ 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() {
+    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() {
+    this.combobox.setAttribute('aria-expanded', false);
+    this.listbox.classList.add('hidden');
+  }
+
+  closeAndBlur() {
+    this.close();
+    this.combobox.blur();
+    this.dispatch('close');
   }
 
   get options() {
@@ -84,6 +150,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 +173,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/views/searches/combobox.rb

@@ -18,7 +18,9 @@ def view_template
           controller: "search-combobox",
           action: "
             keydown->search-combobox#navigate
-            search-listbox:connected->search-combobox#listboxOpen
+            search-listbox:connected->search-combobox#tryOpen
+            dialog:close@window->search-combobox#closeInTarget
+            dialog:open@window->search-combobox#openInTarget
           "
         }
       ) do
@@ -38,14 +40,12 @@ def view_template
               value: query,
               autofocus: true,
               role: "combobox",
-              aria: {
-                expanded: false,
-                autocomplete: "none",
-                controls: "search-listbox",
-                activedescendant: nil
-              },
+              aria: input_aria,
               data: {
-                action: "autosubmit-form#submit"
+                action: "
+                  focus->combobox#tryOpen
+                  input->autosubmit-form#submit
+                "
               },
               placeholder: "Search Joy of Rails",
               class: "w-full step-1"
@@ -55,5 +55,20 @@ def view_template
         render Searches::Listbox.new(pages: pages, query: query)
       end
     end
+
+    def input_aria
+      {
+        expanded: false,
+        autocomplete: "none",
+        controls: "search-listbox",
+        owns: "search-listbox",
+        haspopup: "listbox",
+        activedescendant: ""
+      }
+    end
+
+    def listbox_id
+      "search-listbox"
+    end
   end
 end

app/views/searches/dialog.rb

@@ -5,11 +5,12 @@ class Dialog < ApplicationComponent
     def view_template
       render ::Dialog::Layout.new(
         id: "search-dialog",
-        "aria-label": "Search",
+        aria: {label: "Search Dialog"},
         class: "max-w-xl p-2 mt-32 mx-auto",
         data: {
           controller: "dialog",
           action: "
+            search-combobox:close->dialog#close
             keydown.meta+k@window->dialog#open
             click->dialog#tryClose
           "

app/views/searches/listbox.rb

@@ -13,7 +13,7 @@ def view_template
       ul(**mix(
         id: "search-listbox",
         role: "listbox",
-        class: ["grid", ("hidden" unless pages.any? || query_long_enough?)],
+        class: ["grid"],
         data: {
           controller: "search-listbox"
         }