[Examples] Modal dynamic route doesn't keep scroll position

Bug report

The example from https://github.com/vercel/next.js/tree/canary/examples/with-route-as-modal doesn’t keep scroll position when modal is opened using the dynamic routing method.

Describe the bug

I’m not sure if the dynamic routing method is supposed to work like the QueryString routing where it keeps the scrolling position of the main page. I’m not able to use the QueryString method due to getStaticProps() not working as a component correctly (can’t use mongodb node driver, it errors saying dns could not be found)

The scrolling position is saved when using the QueryString method after you close the modal. But for the dynamic routing method, it unloads the main page and only shows the modal (as seen in the gif below). When the modal is exited, the main page is reloaded again and the scroll position from the previous context is lost.

To Reproduce

1. yarn create next-app --example with-route-as-modal with-route-as-modal-app
2. cd with-route-as-modal-app
3. yarn dev
4. Go to localhost:3000 in Safari
5. Click on one of the numbers under “With Dynamic Routing, and reloads will keep the modal”
6. Exit out of the modal by clicking on the outer area of the screen.

Expected behavior

When exiting out of the modal, it should keep the scroll position of the main page.

Screenshots

System information

• OS: macOS 11.0 Beta (20A5364e)
• Browser: Safari 14.0 (16610.2.2.4)
• Version of Next.js: v9.5.3
• Version of Node.js: v12.18.3

[jmfury]

@kyleawayan I threw up a repo where I’ve used a couple concepts that break with the original example; namely this is using layouts

Seems to be keeping the scroll as desired via scroll={false} on <Link /> when the page components via layouts are essentially all the same.

This was my hunch on how to achieve what you’re looking for and I tried to be descriptive in the Headings to illustrate the differences in functionality for query string vs. dynamic routing.

Give it a look and let me know of any questions 👍 https://github.com/jmfury/nextjs-route-as-modal-plus-scroll

[jmfury]

@kyleawayan Great to hear it’s working! Feel free to tag me on any code you can share outside this thread as needed. Happy to assist if any of the concepts are giving you any trouble in your implementation!