-
Notifications
You must be signed in to change notification settings - Fork 806
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Jetstream modals are closing abruptly on dismiss #384
Comments
Thanks. Can you send in a PR for this? |
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. |
Looking into this... |
You have all my support Caleb! This also happens in the screencasts. |
@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 I'd love to hear your thoughts on how to solve this. Thank you. |
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 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 I'll PR a change to Jetstream's Alpine CDN stub. Here are the following PRs that have the fix for this: |
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
The text was updated successfully, but these errors were encountered: