Modals not dismissing on forward routing

[TylerK]

Following along with the examples given in the Parallel Routing docs, I have the following route structure:

app
├─ @authModal
│  ├─ (.)auth
│  │  └─ login
│  │  │  └─ page.tsx // Contains the modal with login form 
│  └─ [...catchAll]
│  │  │  └─ page.tsx 
├─ dashboard
│  └─ page.tsx
├─ auth
│  └─ login
│  │  └─ page.tsx // Contains only the login form

Almost everything works beautifully.

✅ Clicking Login via <Link href="/auth/login" /> on the homepage will pop open the login modal
✅ Router will reflect /auth/login
✅ Pressing refresh will render /auth/login as a page, as expected
❌ Navigating via router.push('/dashboard') from within the modal does not close the modal

The docs seem to indicate this setup should work:

If you want to navigate elsewhere and dismiss a modal, you can also use a catch-all route.

This doesn't appear to be working. Any help would be greatly appreciated!

[TylerK]

Found a workaround I don't necessarily love:

// AuthModal.tsx
import { usePathname } from 'next/navigation';

export function AuthModal({ children }: { children: ReactNode }) {
    const pathname = usePathname();
    if (!pathname.includes('auth')) {
        return null;
    }
    
    // ... 
}

If anyone has a better way of handling preventing the intercepted Modal from remaining on screen after a router.push() event I'm all ears :)

[charlesloubao]

Another option is to use window.location.replace() but you lose the current context

[TylerK]

Yeah I'm going with this for now, it's ugly but it "works" :)

[olegvlotus]

Thank you for this workaround, that works until a fix is found!

[wlechowicz]

This is still the only fix that makes sense, because adding extra stuff to the parallel route with pages and returning null from those doesn't work for routes with dynamic segments as explained here: #50284 (reply in thread)

[hussam-001]

temp solution

router.push("/dashboard", {
    // TODO: remove this when [...catchAll] works
    forceOptimisticNavigation: true,
});

[TylerK]

Thanks Hussam, unfortunately this doesn't appear to work on 13.4

[hussam-001]

so weird bcz im also using 13.4

[kasir-barati]

Not gonna work when you are import it like this: import { useRouter } from 'next/navigation';

I also tried:

router.push('/somewhere');
router.refresh();

to no avail :/.

[olegvlotus]

Have the same issue, modal doesn't dismiss when navigating to other page with [...catchAll]

[hoangminhtran94]

Still having the same problem in next 13.4.19

[mastoj]

This was driving me crazy since I thought I did something wrong. Is it a bug that router.push does not dismiss the current intercepted route or is it by design? If it is by design how are we supposed to dismiss modals?

[alexander-rebello]

I'm not sure, if it's a bug or supposed to work like this, but the docs recommend using router.back() to dismiss modals.

Have a look at https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#closing-the-modal

[wlechowicz]

router.back() only works in the most simple scenario, it stops working as soon as your modal has links to other intercepted routes.
For example, I have lists of movie thumbnails on the home page (think Netflix), each one opens up a modal with movie details (like /movies/:id). If the movie details page has recommendations for other movies, that's a link to an intercepted route inside an intercepted route, so if you go from home page to movie A details modal (/movies/A), from there to movie B details modal through recs (/movies/B), then router.back() does not dismiss the modal but goes back to movie A (/movies/A).

[gragland]

The issue is that [...catchAll] isn't working for some reason. You can work around this by duplicating your page structure within the parallel route (or at least the pages you want to allow navigation to). Make each of these duplicate pages return null so that they get matched and the modal unmounts. For example:

app
├─ @authModal
│  ├─ (.)auth
│  │  └─ login
│  │  │  └─ page.tsx
│  └─ dashboard
│  │  │  └─ page.tsx (this should return null)
├─ dashboard
│  └─ page.tsx
├─ auth
│  └─ login
│  │  └─ page.tsx

The modal will now disappear when navigating to /dashboard.

[mastoj]

I guess you mean to write

app
├─ @authModal
│  ├─ (.)auth
│  │  └─ login
│  │  │  └─ page.tsx
│  └─ dashboard
│  │  │  └─ page.tsx (this should return null)
├─ dashboard
│  └─ page.tsx
├─ auth
│  └─ login
│  │  └─ page.tsx

or did you intentionally use [dashboard]?

[gragland]

@mastoj thanks, fixed :)

[wlechowicz]

The problem with this workaround is that if dashboard has any dynamic segments inside, you're screwed. Adding @authModal/dashboard/[...catchAll]/page.tsx that returns null also doesn't work, just like the @authModal/[...catchAll]/page.tsx that's supposed to work according to docs. Is it that no catchAlls work under a parallel route?

[benyarb]

Having the same issue in 13.5.3

[Flying0101]

same issue.. nothing seems to work properly for me, using 13.5.6 version..

router.push("/dashboard", {
// TODO: remove this when [...catchAll] works
forceOptimisticNavigation: true,
});

this works well the first time i navigate to another route, but if I open the modal again and try going to another route(or the same) the modal does not close.

[wlechowicz]

Unfortunately I ran into the same issue and spent way too much time thinking I'm doing something wrong. I followed the docs for parallel and intercepting routes to set up a basic modal and I cannot get it to dismiss with either a catchAll or router.push()
It only dismisses through router.back() which is silly if you have Link in your modal and they take you to other, non-intercepted pages.

Verified the behavior to be the same on Next 13.5.6 up to 14.0.2 canary.

The official example linked in the docs - "Nextgram" - kinda works because it doesn't let you do anything once the modal is open and there are no other pages in the app, beside "photos".

[wlechowicz]

This problem should be fixed with #58215 unless your catch-all is under a dynamic segment, then #58272

[Enkratia]

@wlechowicz, it's not fixed. It doesn't work(unmount) without author's workaround.

[wlechowicz]

@Enkratia hey man, what can I say. From my experience, those things get fixed (on purpose or by accident) in one canary and then broken in the next one, I stopped trying to keep up with every latest canary and retesting this because it's just too unstable. I'm waiting for a focused effort that fixes all the big known bugs with AppRouter before considering it production ready or wasting more time on it.

[Enkratia]

@wlechowicz, got it, thanks for your efforts

[Neo-Ciber94]

My current solution to close all modals is using useSelectedLayoutSegment, in my use case it works not sure if is the same for others:

  const segments = useSelectedLayoutSegment();

  const backCount = segments == null ? 1 : segments.split('/').length + 1;
  for (let i = 0; i < backCount; i++) {
    router.back();
  }

[MrOxMasTer]

[...catchAll] still doesn't work. Version: 14.1.1 canary 36

[darthmaim]

This is still not fixed in the latest canary (14.2.0-canary.40).

Is there already an issue with a reproduction for this?

For now I'm using this in my modal, which seems to work for my simple usecase:

const pathname = usePathname();
const initialPath = useRef(pathname);

if(pathname !== initialPath.current) {
  return null;
}

[wlechowicz]

Still hit and miss for me, For example, on 14.1.3 the modal doesn't work at all when using next start, the links just open the page and it doesn't get intercepted. It works in dev, but doesn't in production - lovely.

[laduniestu]

still not work in (14.1.4)

const onSubmit = (values: z.infer<typeof GuestSchema>) => {
    setError('')
    startTransition(() => {
      editGuest(values, id)
        .then((data) => {
          if (data?.error) {
            setError(data.error)
          }
          if (data?.success) {
            toast.success(data.success)
            router.back()
          }
        })
    })
  }

when success submitting the form, the route.back() is triggered but the modal not close

Screen.Recording.2024-04-01.at.01.56.54.mov

but when click the close button which have function ()=>router.back() the modal closed.

<Button variant={'outline'} type='button' onClick={() => router.back()}>Close</Button>

Screen.Recording.2024-04-01.at.01.58.49.mov

i have already tried to use window.location.replace()

const onSubmit = (values: z.infer<typeof GuestSchema>) => {
    setError('')
    startTransition(() => {
      editGuest(values, id)
        .then((data) => {
          if (data?.error) {
            setError(data.error)
          }
          if (data?.success) {
            toast.success(data.success)
            window.location.replace("/admin/guestlist")
          }
        })
    })
  }

this is work but it will reset all the context

Screen.Recording.2024-04-01.at.02.01.52.mov

[siphosenkosindhlovu]

Have the same issue, but I get a client side exception when I navigate backwards with router.back()

[sejoalfaro]

Description

I have similar behavior. In my case I am rendering 2 nested layers as modals. When I try to use server actions to submit the second modal form, router.back doesn't work and something doesn't allow me to touch anything on the screen. So to solve it I am using a route handler just to cover this case.

With Route Handlers

Using.sever.action.mp4

With Server Actions

Using.route.handler.mp4

[proplayercoding]

i use this one

   const onSubmit = () => {
      router.replace(`/dashboard`)
      router.refresh()
  }

[kasir-barati]

Did not work in my scenario 🥲.

I am trying to redirect user to another URL, but it is not necessarily a new URL. It can be the same URL or a completely different one.

import { useRouter } from 'next/navigation';

// ...
const router = useRouter();
router.push(newPath); // newPath is passed down as an arg
router.refresh();
// ...

[qFlensT]

Faced the same problem and wasted a lot of time. That's the main problem with Next JS - you don't realize when you're doing something wrong, and when it's just a bug and it doesn't work as it should

Updated
using this:

export const FixModalCloseBug = ({
  expectedPath,
  children,
}: {
  expectedPath: string | RegExp;
  children: ReactNode;
}) => {
  const pathname = usePathname();

  if (expectedPath instanceof RegExp) {
    if (expectedPath.test(pathname)) {
      return children;
    }
    return null;
  } else if (pathname.includes(expectedPath)) {
    return children;
  }
  return null;
};

Then simply:

export default function Page({ params }: { params: any }) {
  return (
    <FixModalCloseBug expectedPath={"/subscription"}>
      <SubscriptionModal params={params} />
    </FixModalCloseBug>
  );
}

[jiaweing]

Exactly this.

[raiyansarker]

I hope this might help, I didn't find any other good solution,

"use client";

import { Sheet, SheetContent } from "@/components/ui/sheet";
import { usePathname, useRouter } from "@/lib/navigation";
import { type ReactNode, useEffect, useState } from "react";

export default function Modal({ children }: { children: ReactNode }) {
  const [open, setOpen] = useState<boolean>(false);
  const router = useRouter();
  const pathname = usePathname();

  const handleClose = (open: boolean) => {
    if (!open) {
      setOpen(false);
      setTimeout(() => {
        router.back();
      }, 300);
    }
  };

  useEffect(() => {
    if (pathname === "/login" || pathname === "/cart") {
      setOpen(true);
    } else {
      setOpen(false);
    }
  }, [pathname, setOpen]);

  return (
    <Sheet open={open} onOpenChange={handleClose}>
      <SheetContent>
        <div className="h-full w-full overflow-auto">{children}</div>
      </SheetContent>
    </Sheet>
  );
}

[jiaweing]

This is my simple solution - check when the path changes using usePathname() and close it. The initialRender is to prevent it from closing immediately when the dialog opens.

This solution works for Dialog, Drawer and Credenza.
Hope this helps someone.

  const pathname = usePathname()
  const initialRender = useRef(true)
  const [open, setOpen] = React.useState(false)

  useEffect(() => {
    if (initialRender.current) {
      initialRender.current = false
    } else {
      setOpen(false)
    }
  }, [pathname])

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>New Space</DialogTitle>
          <DialogDescription>
            Organise all your files and notes in one place.
          </DialogDescription>
        </DialogHeader>
        <CreateSpaceForm teamId={teamId} />
      </DialogContent>
    </Dialog>
  )