Fix x-disclosure when used with x-collapse transitioning in on the pa…

…ge load instead of showing up instantly
alpinejs · Nov 29, 2023 · 1212d22 · 1212d22
1 parent dc5ce15
commit 1212d22
Showing 1 changed file with 10 additions and 5 deletions.
diff --git 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'() {