diff --git a/lib/ruby_ui/combobox/combobox_controller.js b/lib/ruby_ui/combobox/combobox_controller.js index 8d1d9d32..d1932772 100644 --- a/lib/ruby_ui/combobox/combobox_controller.js +++ b/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" diff --git a/lib/ruby_ui/combobox/combobox_popover.rb b/lib/ruby_ui/combobox/combobox_popover.rb index 68b937f4..6e089f8b 100644 --- a/lib/ruby_ui/combobox/combobox_popover.rb +++ b/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 diff --git a/lib/ruby_ui/combobox/combobox_trigger.rb b/lib/ruby_ui/combobox/combobox_trigger.rb index be32a761..892d4b91 100644 --- a/lib/ruby_ui/combobox/combobox_trigger.rb +++ b/lib/ruby_ui/combobox/combobox_trigger.rb @@ -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",