Fix x-show nesting bug

examples/index.html

@@ -315,9 +315,6 @@
                             <div x-show="open">
                                 I shouldn't leave until the transition finishes.
                                 <div x-show="open"
-                                    x-transition:enter-start="opacity-0 scale-90"
-                                    x-transition:enter="ease-out transition-slow"
-                                    x-transition:enter-end="opacity-100 scale-100"
                                     x-transition:leave-start="opacity-100 scale-100"
                                     x-transition:leave="ease-in transition-slow"
                                     x-transition:leave-end="opacity-0 scale-90">

src/directives/show.js

@@ -2,30 +2,29 @@ import { transitionIn, transitionOut } from '../utils'
 
 export function handleShowDirective(component, el, value, modifiers, initialUpdate = false) {
     const handle = (resolve) => {
-        const hide = () => {
-            resolve(() => {
-                el.style.display = 'none'
-            })
-        }
-
-        const show = () => {
-            resolve(() => {})
-            // Perform showing immediately.
-            if (el.style.length === 1) {
-                el.removeAttribute('style')
-            } else {
-                el.style.removeProperty('display')
-            }
-        }
-
         if (! value) {
             if ( el.style.display !== 'none' ) {
-                transitionOut(el, hide, initialUpdate)
+                transitionOut(el, () => {
+                    resolve(() => {
+                        el.style.display = 'none'
+                    })
+                }, initialUpdate)
+            } else {
+                resolve(() => {})
             }
         } else {
             if ( el.style.display !== '' ) {
-                transitionIn(el, show, initialUpdate)
+                transitionIn(el, () => {
+                    if (el.style.length === 1) {
+                        el.removeAttribute('style')
+                    } else {
+                        el.style.removeProperty('display')
+                    }
+                }, initialUpdate)
             }
+
+            // Resolve immediately, only hold up parent `x-show`s for hidin.
+            resolve(() => {})
         }
     }
 

test/show.spec.js

@@ -100,3 +100,29 @@ test('x-show does NOT wait for transitions to finish if .immediate is present',
     expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;')
     expect(document.querySelector('h1').getAttribute('style')).toEqual(null)
 })
+
+test('x-show works with nested x-shows of different functions (hiding vs showing)', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ show1: true, show2: true }">
+            <span x-show="show1">
+                <h1 x-show="show2"></h1>
+            </span>
+
+            <button x-on:click="show1 = false"></button>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('span').getAttribute('style')).toEqual(null)
+    expect(document.querySelector('h1').getAttribute('style')).toEqual(null)
+
+    document.querySelector('button').click()
+
+    await new Promise((resolve) => setTimeout(() => { resolve(); }, 50))
+
+    await wait(() => {
+        expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;')
+        expect(document.querySelector('h1').getAttribute('style')).toEqual(null)
+    })
+})