refactor(command): track open dialog via static instance ref

Replace querySelector + hardcoded selector with a static `openInstance`
reference set in connect() and cleared in disconnect(). Removes the
`data-ruby-ui--command-dialog` marker attribute and per-controller DOM
lookups, so renaming the controller or restructuring dialog markup no
longer silently breaks single-instance behavior.

Addresses review feedback on #386.

Author: djalmaaraujo

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

@@ -1,8 +1,6 @@
 import { Controller } from "@hotwired/stimulus";
 import Fuse from "fuse.js";
 
-const OPEN_DIALOG_SELECTOR = "[data-ruby-ui--command-dialog]";
-
 // Connects to data-controller="ruby-ui--command"
 export default class extends Controller {
   static targets = ["input", "group", "item", "empty", "content"];
@@ -14,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);
@@ -30,6 +31,12 @@ export default class extends Controller {
     }
   }
 
+  disconnect() {
+    if (this.constructor.openInstance === this) {
+      this.constructor.openInstance = null;
+    }
+  }
+
   open(e) {
     if (e) {
       e.preventDefault();
@@ -39,9 +46,9 @@ export default class extends Controller {
       return;
     }
 
-    const openDialog = document.querySelector(OPEN_DIALOG_SELECTOR);
-    if (openDialog) {
-      this.focusDialogInput(openDialog);
+    const openInstance = this.constructor.openInstance;
+    if (openInstance) {
+      openInstance.focusInput();
       return;
     }
 
@@ -153,8 +160,7 @@ export default class extends Controller {
     this.selectedIndex = -1;
   }
 
-  focusDialogInput(dialog) {
-    const input = dialog.querySelector("[data-ruby-ui--command-target='input']");
-    input?.focus();
+  focusInput() {
+    this.inputTarget?.focus();
   }
 }

gem/lib/ruby_ui/command/command_controller.js

@@ -1,8 +1,6 @@
 import { Controller } from "@hotwired/stimulus";
 import Fuse from "fuse.js";
 
-const OPEN_DIALOG_SELECTOR = "[data-ruby-ui--command-dialog]";
-
 // Connects to data-controller="ruby-ui--command"
 export default class extends Controller {
   static targets = ["input", "group", "item", "empty", "content"];
@@ -14,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);
@@ -30,6 +31,12 @@ export default class extends Controller {
     }
   }
 
+  disconnect() {
+    if (this.constructor.openInstance === this) {
+      this.constructor.openInstance = null;
+    }
+  }
+
   open(e) {
     if (e) {
       e.preventDefault();
@@ -39,9 +46,9 @@ export default class extends Controller {
       return;
     }
 
-    const openDialog = document.querySelector(OPEN_DIALOG_SELECTOR);
-    if (openDialog) {
-      this.focusDialogInput(openDialog);
+    const openInstance = this.constructor.openInstance;
+    if (openInstance) {
+      openInstance.focusInput();
       return;
     }
 
@@ -153,8 +160,7 @@ export default class extends Controller {
     this.selectedIndex = -1;
   }
 
-  focusDialogInput(dialog) {
-    const input = dialog.querySelector("[data-ruby-ui--command-target='input']");
-    input?.focus();
+  focusInput() {
+    this.inputTarget?.focus();
   }
 }

gem/lib/ruby_ui/command/command_dialog_content.rb

@@ -18,7 +18,7 @@ def initialize(size: :md, **attrs)
 
     def view_template(&block)
       template(data: {ruby_ui__command_target: "content"}) do
-        div(data: {controller: "ruby-ui--command", ruby_ui__command_dialog: true}) do
+        div(data: {controller: "ruby-ui--command"}) do
           backdrop
           div(**attrs, &block)
         end

gem/test/ruby_ui/command_test.rb

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