x-collapse plugin rendering issue on children components

[kiriamcf-revo]

Lets say you render a parent element and a child element. Both parent and children can be displayed or hidden, therefore you use the x-show directive.

You want the parent to close the children if it gets closed, therefore when the parent closes it emits an event for all children to close.

The issue comes with the way the children is being displayed. If you use a standard x-show with x-transition (or without transition) the parent successfully closes the children and itself.

If you use x-collapse on the child, when the parent tries to close the child the animation starts and somewhere along the way it breaks and continues to display the parent content (child remains hidden as it should).

I've replicated this behaviour inside of this codepen: https://codepen.io/kiriamcf-revo/pen/NWQVWBP

As a side note, from what I've tested, animation durations do not have any effect on this.

The way I've encountered this issue is by having a dropdown with collapsable items inside. When the dropdown is closed I want to reset all the collapsed children and then the issue happens.

Maybe I am not using x-collapse as it should be used? Any feedback is appreciated, thanks!

I've checked x-collapse issues on this repo and haven't found anything related to this.

x-collapse-bug.mov

[SimoTod]

I think the code is more complex than it should be:

<div x-data="{showParent: false}">
    <button type="button" x-on:click="showParent = !showParent">Display parent</button>
    <div x-show="showParent"
        x-cloak
        x-data="{showChildren: false}" 
        x-transition.opacity.duration.300
        x-effect="if (showParent == false) $nextTick(() => showChildren = false)">
        Parent component
        <button type="button" x-on:click="showChildren = !showChildren">Display children</button>
        <div x-show="showChildren" x-cloak x-collapse.duration.300>
            Children component
        </div> 
    </div>
</div>

[kiriamcf-revo]

You're right, I just wanted to showcase the issue but it seems like the $nextTick() solves it, even though there is a small "flicker" visible when closing the parent component.

[SimoTod]

The nextTick is for the effect so it doesn't track the internal variable not for the animation but yeah, it could have a side effect on collapse, I suppose