add toggle to combobox trigger

Author: sethhorsley

lib/ruby_ui/combobox/combobox_controller.js

@@ -28,6 +28,11 @@ export default class extends Controller {
     if (this.cleanup) { this.cleanup() }
   }
 
+  handlePopoverToggle(event) {
+    // Keep ariaExpanded in sync with the actual popover state
+    this.triggerTarget.ariaExpanded = event.newState === 'open' ? 'true' : 'false'
+  }
+
   inputChanged(e) {
     this.updateTriggerContent()
 
@@ -62,9 +67,19 @@ export default class extends Controller {
     }
   }
 
-  openPopover(event) {
+  togglePopover(event) {
     event.preventDefault()
 
+    if (this.triggerTarget.ariaExpanded === "true") {
+      this.closePopover()
+    } else {
+      this.openPopover(event)
+    }
+  }
+
+  openPopover(event) {
+    if (event) event.preventDefault()
+
     this.updatePopoverPosition()
     this.updatePopoverWidth()
     this.triggerTarget.ariaExpanded = "true"

lib/ruby_ui/combobox/combobox_popover.rb

@@ -17,6 +17,7 @@ def default_attrs
         data: {
           ruby_ui__combobox_target: "popover",
           action: %w[
+            toggle->ruby-ui--combobox#handlePopoverToggle
             keydown.down->ruby-ui--combobox#keyDownPressed
             keydown.up->ruby-ui--combobox#keyUpPressed
             keydown.enter->ruby-ui--combobox#keyEnterPressed

lib/ruby_ui/combobox/combobox_trigger.rb

@@ -22,7 +22,7 @@ def default_attrs
       {
         type: "button",
         class: [
-          "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors border border-input bg-background h-10 px-4 py-2 justify-between",
+          "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors border border-input bg-background h-9 px-4 py-2 justify-between",
           "hover:bg-accent hover:text-accent-foreground",
           "disabled:pointer-events-none disabled:opacity-50",
           "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
@@ -31,7 +31,7 @@ def default_attrs
         data: {
           placeholder: @placeholder,
           ruby_ui__combobox_target: "trigger",
-          action: "ruby-ui--combobox#openPopover"
+          action: "ruby-ui--combobox#togglePopover"
         },
         aria: {
           haspopup: "listbox",