Parallel Route Modal closed using router.push cannot open again until hard refresh

[martitv]

Link to the code that reproduces this issue

https://github.com/martitv/ModalPushTest

To Reproduce

1. Start the application with pnpm dev
2. Click a photo.
3. Click "Go back!" button in modal

Current vs. Expected behavior

Current: Modal doesn't close. In my real world app, the modal closes. But you cannot open it again until hard refresh. It just changes the route, but nothing happens. Cant replicate as in this test app the modal fails earlier.

Expected: Modal closes. In my real world app I would expect to be able to open a modal again when clicking a link matching the paralell route

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Enterprise
  Available memory (MB): 16164
  Available CPU cores: 8
Binaries:
  Node: 18.17.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.1.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.2
Next.js Config:
  output: standalone

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

Parallel & Intercepting Routes

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

next dev (local)

Additional context

No response

[martitv]

I believe the issue might be connected to portals? Got the idea from this example: https://ariakit.org/examples/dialog-next-router It disables portal usage with the comment "// React portal is not rendered on the server, so we disable it."

I tried removing the portal target in my real-world app and now it works. Using mantine modal in that app. But i also tried using the nextGram modal which gave the same behaviour when removing the portal.

[Sam-Apostel]

I seem to be having the same problem using redirect from a server action. The react component does not get remounted after redirection ('push' / 'replace') to close it.

router.back('/') does still work as expected

[rthaut]

I just ran into this same issue (currently using next@14.2.5) following the "Modals" Example for Parallel Routes".

Using router.back() closes the modal, but router.push('/') and router.replace('/') both fail to close the modal, despite updating the URL as expected.

I have both a default.tsx and a [...catchAll]/page.tsx that both return null in the @​slot.

For now I am using window.location.href = '/' to force the hard-refresh, thereby ensuring the modal closes and allowing me to specify the target path (which is why I can't rely on router.back() in my use case).

I can work up a minimum code repository this week, unless someone already has a working example to provide.

[50Bytes-dev]

Same problem

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!