[Bug Fix] Prevent Command dialog stacking (#230)

Author: djalmaaraujo

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

@@ -1,6 +1,8 @@
 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"];
@@ -37,6 +39,12 @@ export default class extends Controller {
       return;
     }
 
+    const openDialog = document.querySelector(OPEN_DIALOG_SELECTOR);
+    if (openDialog) {
+      this.focusDialogInput(openDialog);
+      return;
+    }
+
     document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
     // prevent scroll on body
     document.body.classList.add("overflow-hidden");
@@ -144,4 +152,9 @@ export default class extends Controller {
     this.itemTargets.forEach((item) => this.toggleAriaSelected(item, false));
     this.selectedIndex = -1;
   }
+
+  focusDialogInput(dialog) {
+    const input = dialog.querySelector("[data-ruby-ui--command-target='input']");
+    input?.focus();
+  }
 }

gem/lib/ruby_ui/command/command_controller.js

@@ -1,6 +1,8 @@
 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"];
@@ -37,6 +39,12 @@ export default class extends Controller {
       return;
     }
 
+    const openDialog = document.querySelector(OPEN_DIALOG_SELECTOR);
+    if (openDialog) {
+      this.focusDialogInput(openDialog);
+      return;
+    }
+
     document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
     // prevent scroll on body
     document.body.classList.add("overflow-hidden");
@@ -144,4 +152,9 @@ export default class extends Controller {
     this.itemTargets.forEach((item) => this.toggleAriaSelected(item, false));
     this.selectedIndex = -1;
   }
+
+  focusDialogInput(dialog) {
+    const input = dialog.querySelector("[data-ruby-ui--command-target='input']");
+    input?.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"}) do
+        div(data: {controller: "ruby-ui--command", ruby_ui__command_dialog: true}) do
           backdrop
           div(**attrs, &block)
         end

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-ruby-ui--command-dialog/, output)
   end
 end