Add generic controller for closing details on outside click

Implemented a new Stimulus controller for `<details>` elements and applied it to the address form. This generic controller leverages the `useClickOutside` hook from `stimulus-use` to automatically close the `<details>` when a click is detected outside its boundaries. Co-Authored-By: Elia Schito <[email protected]>
solidusio · Nov 15, 2023 · 3efd79f · 3efd79f
1 parent 8b56fef
commit 3efd79f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/admin/app/components/solidus_admin/orders/show/address/component.html.erb b/admin/app/components/solidus_admin/orders/show/address/component.html.erb
@@ -10,7 +10,7 @@
           </h2>
 
           <% if @user&.addresses&.any? %>
-            <details class="text-black text-sm" data-<%= stimulus_id %>-target="addresses">
+            <details data-controller="details" data-<%= stimulus_id %>-target="addresses" class="text-black text-sm">
               <summary
                 class="text-left flex cursor-pointer select-none"
                 data-action="keydown.esc-><%= stimulus_id %>#close"

diff --git a/admin/app/javascript/solidus_admin/controllers/details_controller.js b/admin/app/javascript/solidus_admin/controllers/details_controller.js
@@ -0,0 +1,12 @@
+import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
+
+export default class extends Controller {
+  connect() {
+    useClickOutside(this)
+  }
+
+  clickOutside(event) {
+    this.element.removeAttribute('open')
+  }
+}