From 1212d22c4230964d56765f1ac62223fa9f9037c8 Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Wed, 29 Nov 2023 12:01:02 -0500
Subject: [PATCH] Fix x-disclosure when used with x-collapse transitioning in
 on the page load instead of showing up instantly

---
 packages/ui/src/disclosure.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/disclosure.js b/packages/ui/src/disclosure.js
index d51f68ea8..7a302f01e 100644
--- a/packages/ui/src/disclosure.js
+++ b/packages/ui/src/disclosure.js
@@ -25,12 +25,13 @@ function handleRoot(el, Alpine) {
         'x-modelable': '__isOpen',
         'x-data'() {
             return {
-                init() {
-                    queueMicrotask(() => {
-                         let defaultIsOpen = Boolean(Alpine.bound(this.$el, 'default-open', false))
+                // The panel will call this...
+                // We can't do this inside a microtask in x-init because, when default-open is set to "true",
+                // It will cause the panel to transition in for the first time, instead of showing instantly...
+                __determineDefaultOpenState() {
+                    let defaultIsOpen = Boolean(Alpine.bound(this.$el, 'default-open', false))
 
-                         if (defaultIsOpen) this.__isOpen = defaultIsOpen
-                    })
+                    if (defaultIsOpen) this.__isOpen = defaultIsOpen
                 },
                 __isOpen: false,
                 __close() {
@@ -70,7 +71,11 @@ function handleButton(el, Alpine) {
 
 function handlePanel(el, Alpine) {
     Alpine.bind(el, {
+        'x-init'() {
+            this.$data.__determineDefaultOpenState()
+        },
         'x-show'() {
+           console.log('process show')
             return this.$data.__isOpen
         },
         ':id'() {