Jetstream modals are closing abruptly on dismiss

[adddz]

• Jetstream Version: 1.5.1
• Jetstream Stack: Livewire
• Laravel Version: 8.11.2
• PHP Version: 7.4.6

Description:

When dismissing a modal by pressing the Cancel button (or the Save action), the modal is abruptly dismissed without respecting the animation. It should behave the same as when the modal is dismissed for a background click.

Steps To Reproduce:

I slowed down the connection to show the issue.

https://www.loom.com/share/ac244139980848b087ce83a26406ef22

[driesvints]

Thanks. Can you send in a PR for this?

[adddz]

You’re welcome! In a so polished UI like the one Jetstream/Livewire provides, it is very noticeable.

To be honest I’m not sure how to fix that.
It would be great if someone from the Livewire team could chime in.

[calebporzio]

Looking into this...

[adddz]

You have all my support Caleb! This also happens in the screencasts.

[adddz]

@calebporzio – looks like the problem is the component is refreshed as soon as an action completes. As the modal is part of the Livewire component, it's automatically removed and reinserted in the page as part of the refresh process.

I tried moving the modal outside of the Livewire component and this works but the only way to trigger the Livewire action is to emit an event by using livewire.emit('event-name') from AlpineJS. By doing this I can't use the wire:loading directive to disable the button though.

I'd love to hear your thoughts on how to solve this. Thank you.

[calebporzio]

Ok, I dug into the problem. The root of it is caused by the modal component wrapping an x-transition/x-show in a div with it's own non-transitioned x-show.

For example:

<div x-show="show">
    <div x-show="show" x-transtion...>...</div>
</div>

Alpine is smart enough to not execute the parent "x-show" too early (as that would hide the inner div before it had a chance to transition out).

However, Livewire is NOT.

You can actually fix this by adding an empty transition with a matching duration to the parent <div>

I fixed this and a few other edge cases as I dug into this.

Both Alpine and Livewire will need to be updated to the following versions:

Livewire: v2.3.1
Alpine: v2.7.3

I'll PR a change to Jetstream's Alpine CDN stub.

Here are the following PRs that have the fix for this:
Livewire: livewire/livewire#1911
Alpine: alpinejs/alpine#853