fix(Modal): wait for transition to complete to reset state

[noook]

🔗 Linked issue

Fixes #1557

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

When using modals programmatically, a few error happen:

• Modal state is kept after closing the modal
• When closing the modal with the composable API, the state is reset too early, leading to the component being unmounted before the transition is complete.

To address these issues, we listen to the "after-leave" event fired by Headless UI's transition, so that we know it is safe to unmount the component.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[noook]

Btw @genu , I think you can port this on useSlideover as well

[genu]

Thanks, I will take a look

[benjamincanac]

@noook Sorry for the conflicts, I've made some cleaning in #1619.

[genu]

@noook In testing it useSlideover I'm not seeing any race conditions during the transitions.

I can make this change, but since the issue doesn't exist, I'm hesitant to add a fix for a non-existent problem.

Am I missing something?

[noook]

Hmm, maybe it doesn't happen. To make it short what happened with the modals when closing programmatically is that the reset was done before the transition was complete, which led to the transition being shorter as there is remaining component

If you don't see any issues on your side then it's fine I guess

[genu]

I'll continue testing on my end and keep an eye out for issues that come up in the meantime.

[genu]

I take that back, I think I had some wonky caching issues before. I do see the issue as well in useSlideover

I'll get a PR ready for fix