[Bug Fix] Prevent Command dialog stacking

docs/app/javascript/controllers/ruby_ui/command_controller.js

@@ -12,13 +12,16 @@ export default class extends Controller {
     },
   };
 
+  static openInstance = null;
+
   connect() {
     this.selectedIndex = -1;
 
     if (!this.hasInputTarget) {
       return;
     }
 
+    this.constructor.openInstance = this;
     this.inputTarget.focus();
     this.searchIndex = this.buildSearchIndex();
     this.toggleVisibility(this.emptyTargets, false);
@@ -28,6 +31,12 @@ export default class extends Controller {
     }
   }
 
+  disconnect() {
+    if (this.constructor.openInstance === this) {
+      this.constructor.openInstance = null;
+    }
+  }
+
   open(e) {
     if (e) {
       e.preventDefault();
@@ -37,6 +46,12 @@ export default class extends Controller {
       return;
     }
 
+    const openInstance = this.constructor.openInstance;
+    if (openInstance) {
+      openInstance.focusInput();
+      return;
+    }
+
     document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
     // prevent scroll on body
     document.body.classList.add("overflow-hidden");
@@ -144,4 +159,8 @@ export default class extends Controller {
     this.itemTargets.forEach((item) => this.toggleAriaSelected(item, false));
     this.selectedIndex = -1;
   }
+
+  focusInput() {
+    this.inputTarget?.focus();
+  }
 }

docs/app/views/docs/command.rb

@@ -93,6 +93,12 @@ def view_template
         RUBY
       end
 
+      Heading(level: 2) { "Single instance" }
+
+      p(class: "text-muted-foreground") do
+        plain "The Command dialog is single-instance. Activating a trigger while the dialog is already open refocuses the existing dialog instead of stacking another one on top, so repeated keybindings or trigger clicks behave predictably."
+      end
+
       render Components::ComponentSetup::Tabs.new(component_name: component)
 
       render Docs::ComponentsTable.new(component_files(component))

gem/lib/ruby_ui/command/command_controller.js

@@ -12,13 +12,16 @@ export default class extends Controller {
     },
   };
 
+  static openInstance = null;
+
   connect() {
     this.selectedIndex = -1;
 
     if (!this.hasInputTarget) {
       return;
     }
 
+    this.constructor.openInstance = this;
     this.inputTarget.focus();
     this.searchIndex = this.buildSearchIndex();
     this.toggleVisibility(this.emptyTargets, false);
@@ -28,6 +31,12 @@ export default class extends Controller {
     }
   }
 
+  disconnect() {
+    if (this.constructor.openInstance === this) {
+      this.constructor.openInstance = null;
+    }
+  }
+
   open(e) {
     if (e) {
       e.preventDefault();
@@ -37,6 +46,12 @@ export default class extends Controller {
       return;
     }
 
+    const openInstance = this.constructor.openInstance;
+    if (openInstance) {
+      openInstance.focusInput();
+      return;
+    }
+
     document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
     // prevent scroll on body
     document.body.classList.add("overflow-hidden");
@@ -144,4 +159,8 @@ export default class extends Controller {
     this.itemTargets.forEach((item) => this.toggleAriaSelected(item, false));
     this.selectedIndex = -1;
   }
+
+  focusInput() {
+    this.inputTarget?.focus();
+  }
 }

gem/test/ruby_ui/command_test.rb

@@ -60,5 +60,6 @@ def test_render_with_all_items
     end
 
     assert_match(/Search/, output)
+    assert_match(/data-controller="ruby-ui--command"/, output)
   end
 end