Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Issues with modals being used in routes #1167
Our app has a lot of modals that are child routes of our index page. That way you can go to something like /login and have a login modal appear overlaid on top of the existing index page. You can use the back/forward button to open and close modals this way as well.
When these modals are closed they will typically go back or to some specified route by calling
For example, I click 'login' and the router goes to localhost/login. The component for this route is something like
When a bootstrap-vue modal opens it adds 15 pixels of padding to the body element and disables scrolling by setting overflow: hidden.
When we navigate away from the modal using the back button the padding and modal-open class remains on the body element.
Here is a video demonstrating the problem
bootstrap-vue modals need to remove the body classes and cleanup code not only when explicitly hidden but also when destroyed.
Just as an FYI in my route components if I add a ref to the
Thanks for bringing this up...