Modal not closing after opening new page

[vanlooverenkoen]

Link to the code that reproduces this issue

https://github.com/vanlooverenkoen/nextgram

To Reproduce

It is not possible to go from a page (A) to a modal and to another page (B). If you try to do this this is what happens.

1. open webapp
2. initial route is page A
3. click on a number (modal should open) (until now everything is working as expected)
4. now you click on "Open test page"
5. This should open a new page (You can see that the url changed to /testand the new page is shown, but there is 1 big issue, the modal still stays open)
6. When you click on the close button (of the Modal) page B is removed an the url changes back to /photos/1
7. When you click on the close button (of the Modal) again, the modal itself closes.And the url changes back to /

Current vs. Expected behavior

The expected behaviour is that the modal closes if you go to another screen.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:21:53 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6020
  Available memory (MB): 65536
  Available CPU cores: 12
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.20
  pnpm: 9.3.0
Relevant Packages:
  next: 14.2.4 // Latest available version is detected (14.2.4).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Parallel & Intercepting Routes

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

I have this on my own projects as well as nextgram.

This is a screen recording of the whole process

Screen.Recording.2024-07-02.at.14.40.08.mov

[ztanner]

Hi! The default behavior for parallel routes (which interception routes are built upon) is to remain in their "active" state if you navigate to a route that it doesn't match. If your intention is to hide the modal when navigating to another route, you need to explicitly create a corresponding route that renders null. Next.js doesn't assume that it's safe/desireable to unmount the parallel route that was being rendered.

You can read about this behavior here.

In your case, if you create a @modal/[...catchAll]/page.tsx component that renders null, you'll see the modal disappear when navigating to the /test route.