x-show only waits first child to transition

[matheusb-comp]

From the docs:

Note: x-show will wait for any children to finish transitioning out. If you want to bypass this behavior, add the .immediate modifer:

I assume that x-show will wait until the children with the longest transition duration gets hidden before the element itself being hidden.
However in version 2.7.3, if the first child has duration.400ms and the second duration.2000ms, the parent div is hidden as soon as the first child finishes.
Example: https://jsfiddle.net/9atkrghe/6/

code

<button x-data="{}" type="button" @click="$dispatch('toggle-state');">
  TOGGLE
</button>

<div
  x-data="{ open: true, toggle(){ this.open = !this.open; } }"
  @toggle-state.window="toggle();"
  x-show="open"
>
  <div
    x-show.transition.out.duration.400ms="open"
    style="color: white; background-color: blue; height: 50px; width: 60px;"
  >
    A
  </div>
  <div
    x-show.transition.out.duration.2000ms="open"
    style="color: white; background-color: darkred; height: 30px; width: 80px;"
  >
    B
  </div>
</div>

The same happens when using x-transition and Tailwind classes: https://jsfiddle.net/xpkr32as/53/

[19hours]

I'm facing the same issue. Do you have a workaround?

[KevinBatdorf]

I looked at this a few weeks ago but forgot to reply. The workaround would be to place the element with the higher value first as Alpine isn't tracking sibling timers but the first child it encounters.

You'd then have to position your elements with CSS accordingly, which isn't ideal of course, but should be pretty trivial.