question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Modal - Unable to scroll page after closing during a vue-router guard

See original GitHub issue

When using a Modal as an ‘Are you sure?’ type dialog during a navigation change, it prevents the user from being able to scroll the page after they reach the requested page.

I detect the route changing using vue-router’s beforeNavigationLeave method. Using the reference to the modal, I call the show() method on it to display to the user, and set the next() function of vue-router to a local variable in the component. Then, once the user clicks the OK method on the modal, this method is called to continue the navigation. After they land on the requested page, they’re unable to scroll. It is also not possible to scroll regardless of route until the user reloads the page in their browser.

I’ve prepared a test case here.

Operating System: Mac OS X 10.14.3 Browser: Google Chrome 72.0.3626.109 Bootstrap Vue: Version 2.0.0-rc.14

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:12 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
tmorehousecommented, Mar 21, 2019

It is possible…

Will look into this

0reactions
tmorehousecommented, Apr 8, 2019

Excellent.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cannot scroll on page after modal closes - Stack Overflow
I have a modal to update data. When the update is complete the modal closes and I cannot scroll on the page afterwards....
Read more >
Handling Dialogs with Vue Router - DEV Community ‍ ‍
We can simply use the router.back() method for navigating one page back to close the modal, since we toggle the visibility with the...
Read more >
Scroll Behavior | Vue Router
When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of...
Read more >
Vue.js Authentication By Example: Composition API
Scroll down and click the "Save Changes" button. Do not close this page yet. You'll need some of its information in the next...
Read more >
[Solved]-The modal window is not active-Vue.js
Coding example for the question The modal window is not active-Vue.js. ... In the example they're using a combination of Bootstrap/jQuery.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found