Backdrop Not Removed on Route Navigation in Vue

[michaelnabil230]

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]

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.

[bluefire2121]

This issue has existed for a long time and not just with Vue. Hopefully the cleanup is prioritized.

[jahaganiev]

Hey everyone, the destroy method has been implemented with the latest v2.6.0 release. Please try it out with the latest version, thanks!