search

htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.9k stars 309 forks source link

Backdrop Not Removed on Route Navigation in Vue #510

Open michaelnabil230 opened 4 days ago

michaelnabil230 commented 4 days ago

Summary

Backdrop not removed when go to other route in modal

Steps to Reproduce

When using a modal in Vue with a link that navigates to a new page, the backdrop remains in the DOM after navigation. This occurs because the afterTransition function, responsible for removing the backdrop, takes time to execute. If route navigation occurs before the function completes, the backdrop is not removed, leading to leftover elements in the DOM and potential UI inconsistencies.

Expected Behavior

The backdrop should be removed from the DOM immediately or as part of a cleanup process when the route changes, even if afterTransition has not yet completed.

Actual Behavior

The backdrop remains in the DOM, causing visual inconsistencies.

Additional Notes

This issue is particularly noticeable when navigating away quickly after triggering the modal, as the afterTransition delay exacerbates the problem. Addressing this could improve Preline's integration with Vue and similar frameworks that rely heavily on dynamic DOM updates.

Let me know if you need any additional information or a sample project to replicate the issue.

mikescola commented 2 days ago

There is proper cleanup coming to preline if you look at the current PR's. This would fix your issue. It's coming sometime this month, I did ping them this morning to try to get a more concrete day.