Since v14.0.2, using revalidatePath in nested Parallel Routes prevents router.back from functioning

[zaru]

Link to the code that reproduces this issue

https://github.com/zaru/nested-parallel-routes

To Reproduce

1. Click the "Open drawer" button.
2. Click the "Open modal" button.
3. Click the "Revalidate submit" button.
4. The modal is expected to close but does not close.

Current vs. Expected behavior

Executing router.back() is expected to clear the Slot of Parallel Routes and close the modal, but in reality, the modal does not close. However, the URL and History do go back one step.

This unexpected behavior occurs when revalidatePath() is executed within ServerActions.

https://github.com/zaru/nested-parallel-routes/blob/c459d5d2b7425b5cc9b7c44cada8e001de02c5f4/src/app/%40modal/modal/action.ts#L7

I can close the modal when I don't execute revalidatePath(), but I'm having trouble updating the screen to the latest version without it.

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:22:05 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6000
Binaries:
  Node: 18.12.1
  npm: 9.6.6
  Yarn: 3.6.3
  pnpm: N/A
Relevant Packages:
  next: 14.0.4-canary.6
  eslint-config-next: 14.0.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

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

App Router

Additional context

This was working correctly in Next.js versions prior to v14.0.1.

[zaru]

Unexpected behavior: The modal does not close.

2023-11-21.15.42.12.mov

Expected behavior: The modal closes.

2023-11-21.15.43.39.mov

[scastiel]

I’m having the same issue with 14.0.4 and 14.0.5-canary.14. The code is working fine with 14.0.1. 😢

[michaelcummings12]

Having this issue with 14.0.5-canary.16. It ** looked ** like it was supposed to be fixed in .15, but doesn't appear so.

#59585

14.0.1 is the last working version for me.

[sinafath]

same issue on 14.0.5-canary.18

[jasonbert]

I think this behaviour may be related to the issue described here, difference is I'm revalidating by tag.

I've got a modal displaying a blog post coming from a parallel/intercepted route, which has a "favourite" (heart) toggle button that calls a server action and revalidates the cache by tag. When "closing" the modal (router.back()), the route changes but doesn't remove the modal.

1. Trigger modal/parallel/intercepted route by clicking on blog link (next/link).
   

2. Click on "favourite" toggle button, triggers server action and revalidates by tag.
   

3. Click on "close" (X) button to close the modal (router.back()). The route has changed, but the modal hasn't been removed.
   

Modal Component

'use client'

import { useRouter } from "next/navigation";
import React, { MouseEventHandler, PropsWithChildren, useCallback, useEffect, useRef } from 'react';
import { Heading2 } from '../heading';
import styles from './index.module.scss';

interface ModalProps extends PropsWithChildren {
    header?: string | React.ReactNode
    footer?: React.ReactNode
    onClose?: () => void
}

export default function Modal({ children, header, footer, onClose }: ModalProps) {
    const overlay = useRef(null);

    const handleClose = useCallback(() => {
        if (onClose) onClose();
    }, [onClose]);

    const handleClick: MouseEventHandler = useCallback((e) => {
        if (onClose && e.target === overlay.current) {
            onClose();
        }
    }, [onClose]);

    const handleKeyDown = useCallback((e: KeyboardEvent) => {
        if (onClose && e.key === "Escape") onClose();
    }, [onClose]);

    useEffect(() => {
        document.addEventListener("keydown", handleKeyDown);
        return () => document.removeEventListener("keydown", handleKeyDown);
    }, [handleKeyDown]);

    return (
        <div ref={overlay} className={styles.Modal} onClick={handleClick}>
            <div className={styles.Modal__container}>
                <div className={styles.Modal__header}>
                    {header &&
                        <div className={styles.Modal__headerContent}>
                            {typeof header === 'string' ?
                                <Heading2>{header}</Heading2> :
                                header
                            }
                        </div>
                    }
                    <div className={styles.Modal__headerClose}>
                        <button onClick={handleClose} className={styles.Modal__headerCloseButton}>X</button>
                    </div>
                </div>
                <div className={styles.Modal__content}>
                    {children}
                </div>
                {footer &&
                    <div className={styles.Modal__footer}>
                        <div className={styles.Modal__footerContent}>
                            {footer}
                        </div>
                    </div>
                }
            </div>
        </div>
    )
}

export function RouterModal(props: ModalProps) {
    const router = useRouter();
    const handleClose = useCallback(() => {
        if (props.onClose) {
            props.onClose();
        }

        router.back();
    }, [router]);

    return <Modal {...props} onClose={handleClose} />
}

Action

'use server'

export async function toggleBlogFavoriteAction(blogId: string) {
    await toggleBlogFavorite(blogId);

    revalidateTag(BLOG_FAVORITES_CACHE_TAG);
}

Component

'use client';

import { startTransition, useOptimistic } from "react";
import { PrimaryButton } from "~f/framework/button";
import { toggleBlogFavoriteAction } from "./blogAction";

export default function BlogFavoriteToggleButton({ blogId, isFavorite }: { blogId: string, isFavorite: boolean }) {
    const [optimisticIsFavorite, setOptimisticIsFavorite] = useOptimistic(isFavorite);

    async function toggle() {
        startTransition(() => {
            setOptimisticIsFavorite(!optimisticIsFavorite);
        });

        await toggleBlogFavoriteAction(blogId);
    };

    return (
        <PrimaryButton onClick={toggle} style={{ minWidth: 50 }}>{optimisticIsFavorite ? '❤️' : '🖤'}</PrimaryButton>
    )
}

Source: https://github.com/scorado-ltd/scorado-examples-nextjs-cosmos
Next.js: 14.0.4

[aryzle]

experiencing the same problem in 14.1.0

[aryzle]

this is looking great on the latest canary version 14.2.0-canary.48, thank you!!

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.