From c989ae6d98e45c275a062130f4f71c7cf84044af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Djalma=20Ara=C3=BAjo?= <djalma@nossomos.cc>
Date: Mon, 27 Jul 2026 17:01:17 -0300
Subject: [PATCH] [Bug Fix] Accordion: sync docs Stimulus controller with gem
 (#168 fix)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The docs app's copy of the accordion controller was never updated when
the gem fixed hidden-content handling in 0897b2a, so
https://rubyui.com/docs/accordion's own preview never opened — clicking
a trigger did nothing since the content stayed `hidden` regardless of
height animation. The gem component itself was already correct.
---
 .../ruby_ui/accordion_controller.js           | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/docs/app/javascript/controllers/ruby_ui/accordion_controller.js b/docs/app/javascript/controllers/ruby_ui/accordion_controller.js
index 2408ce7fe..3ed2952c2 100644
--- a/docs/app/javascript/controllers/ruby_ui/accordion_controller.js
+++ b/docs/app/javascript/controllers/ruby_ui/accordion_controller.js
@@ -65,9 +65,15 @@ export default class extends Controller {
 
   // Reveal the accordion content with animation
   revealContent() {
-    const contentHeight = this.contentTarget.scrollHeight;
+    const content = this.contentTarget;
+
+    // Remove hidden so the element participates in layout before measuring
+    content.removeAttribute("hidden");
+    content.dataset.state = "open";
+
+    const contentHeight = content.scrollHeight;
     animate(
-      this.contentTarget,
+      content,
       { height: `${contentHeight}px` },
       {
         duration: this.animationDurationValue,
@@ -78,14 +84,23 @@ export default class extends Controller {
 
   // Hide the accordion content with animation
   hideContent() {
+    const content = this.contentTarget;
+    content.dataset.state = "closed";
+
     animate(
-      this.contentTarget,
+      content,
       { height: 0 },
       {
         duration: this.animationDurationValue,
         easing: this.animationEasingValue,
       },
-    );
+    ).finished.then(() => {
+      // After animation completes, truly hide the element so it is removed
+      // from layout and form focus — prevents trapped validation errors
+      if (content.dataset.state === "closed") {
+        content.setAttribute("hidden", "");
+      }
+    });
   }
 
   // Rotate the accordion icon 180deg using animate function