Custom dialog not shown

[piszczu4]

I have a code like this:

  const navGuard = useNavigationGuard({
    enabled: isStarted,
  });


  return (
    <>
      <ResponsiveDialog
        open={navGuard.active}
        description={
          'Opuszczenie strony spowoduje utratę dotychczasowego dostępu!'
        }
        footer={{
          cancel: <Button onClick={navGuard.reject}>Anuluj</Button>,
          submit: <Button onClick={navGuard.accept}>Anuluj</Button>,
        }}
      />

but the dialog never shows and always the default browser popup is shown. How to fix that? I want to make a callack to my database before user left the page.

[viralcodex]

can you share more details about the issue, like your current stack, console messages, usage and scenario details where you are using it.

[piszczu4]

I have a component like this:

'use client';

import { SolveExamConfirmAnswerButton } from '@/app/(public)/exams/[id]/solve-exam/solve-exam-confirm-answer-button';
import { SolveExamEndDialog } from '@/app/(public)/exams/[id]/solve-exam/solve-exam-end-dialog';
import { SolveExamHeader } from '@/app/(public)/exams/[id]/solve-exam/solve-exam-header/solve-exam-header';
import { SolveExamHomework } from '@/app/(public)/exams/[id]/solve-exam/solve-exam-homework';
import { SolveExamHomeworkAnswerSelect } from '@/app/(public)/exams/[id]/solve-exam/solve-exam-homework-answer-select';
import { SolveExamHomeworks } from '@/app/(public)/exams/[id]/solve-exam/solve-exam-homeworks';
import { useSolveExamContext } from '@/app/(public)/exams/[id]/solve-exam/solve-exam-provider';
import { SolveExamResult } from '@/app/(public)/exams/[id]/solve-exam/solve-exam-result';
import { SolveExamTitle } from '@/app/(public)/exams/[id]/solve-exam/solve-exam-title';
import { ContainerLoader } from '@/components/loaders/container-loader';
import { Button } from '@/components/ui/button';
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
import { getUserOrGuest } from '@/lib/utils';
import { Play } from 'lucide-react';
import { useNavigationGuard } from 'next-navigation-guard';
import { useRouter } from 'next/navigation';
import { ReactNode } from 'react';

export const SolveExamDialog = ({ trigger }: { trigger?: ReactNode }) => {
  const { isOpen, setIsOpen, isEnded, isStarted, isLoading } =
    useSolveExamContext();
  const user = getUserOrGuest();
  const router = useRouter();

  const navGuard = useNavigationGuard({
    enabled: isStarted && !isEnded,
  });

  return (
    <>
      <ResponsiveDialog
        open={navGuard.active}
        description={
          'Opuszczenie strony spowoduje utratę dotychczasowego dostępu!'
        }
        footer={{
          cancel: <Button onClick={navGuard.reject}>Anuluj</Button>,
          submit: <Button onClick={navGuard.accept}>Opuść stronę</Button>,
        }}
      />

      <ResponsiveDialog
        open={isOpen}
        onOpenChange={setIsOpen}
        hideClose={true}
        alert
        forceDialog
        fullscreen
        onOpenAutoFocus={(e) => e.preventDefault()}
        trigger={
          trigger ?? (
            <button
              onClick={(e) => {
                if (!user) {
                  e.preventDefault();
                  router.push(`/login?callbackUrl=${window.location.pathname}`);
                }
              }}
              className='flex items-center gap-2 rounded border bg-slate-3 p-2 hover:bg-slate-4'
            >
              <Play className='h-5 w-5 shrink-0' />
              Rozwiąż online
            </button>
          )
        }
        content={
          <>
            {isLoading && <ContainerLoader className='h-20 w-20' />}
            {isEnded ? (
              <SolveExamResult />
            ) : isStarted ? (
              <div className='flex w-full flex-1 flex-col overflow-hidden'>
                <SolveExamHeader />
                <div className='my-2 flex-1 overflow-auto'>
                  <SolveExamHomework />
                </div>
                <div className='flex flex-col gap-4 rounded border bg-muted p-3'>
                  <SolveExamHomeworkAnswerSelect />
                  <div className='flex items-center gap-2 self-center'>
                    <SolveExamEndDialog />
                    <SolveExamConfirmAnswerButton />
                  </div>
                  <SolveExamHomeworks />
                </div>
              </div>
            ) : (
              <SolveExamTitle />
            )}
          </>
        }
      />
    </>
  );
};

It opens an exam dialog and when exam status is isStarted and not isEnded, then when user want to leave a page I want to display a dialog that the result will not be shown and on submit I want to do a call to my backend to mark an exam attempt as left_by_user. Ufortunately, the current setup does not work and always the default browser dialog is shown. Also, there is no rerender in that componenet when I want to refresh a page so obviously there is no chance to show my custom dialog. I want to completely hide the default dialog and show only my custom one.

[logonv]

+1

Using NextJS App router

custom component is this

const DirtyDataDialog = ({ enabled }: { enabled: boolean }) => {
  const navguard = useNavigationGuard({ enabled })
  return (
    <ControllableAlertDialog
      title="Discard Changes?"
      isOpen={navguard.active}
      onConfirm={navguard.accept}
      onCancel={navguard.reject}
    >
      You have unsaved changes. Do you want to discard them? There&apos;s no undo.
    </ControllableAlertDialog>
  )
}

When part of a larger page and enabled, only the default browser dialog appears

[logonv]

#20 (comment)

relevant comment in another issue

[piszczu4]

It's still an issue, any progress on that? Also, are there plans to support Link component as well as for now it does not trigger the guard?

[fingertips18]

+1

Also using NextJS app router here version 15.x, when logging the active prop returned by the useNavigationGuard even though enabled is set to true, it stays false all the time. Seems like due to the browser changes its very difficult to bypass this interaction. Maybe update the README regarding this issue?

[Paul-Hebert]

+1 here

Using the documented code pattern it's impossible to block client-side navigations triggered by Link.

Interestingly, the confirm: () => {} option does seem to work

[Paul-Hebert]

I was able to find a workaround. I made a component like this:

"use client";

import * as React from "react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { useNavigationGuard } from "next-navigation-guard";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";

// This matches the type of the guardParams object passed to the confirm callback
// It is not exported from the library, so we need to define it here.
// @see https://github.com/LayerXcom/next-navigation-guard/blob/5e4d2c48c1e9fa42898fa2d0e8651e97427b54fe/src/types.ts#L7
interface NavigationGuardParams {
  to: string;
  type: "push" | "replace" | "refresh" | "popstate" | "beforeunload";
}

interface NavigationGuardAlertDialogProps {
  enabled: boolean;
  title?: string;
  description?: React.ReactNode;
  continueLabel?: string;
  exitLabel?: string;
}

/**
 * This is a helper component that displays an alert dialog when the user attempts to navigate away from a page that has unsaved changes.
 *
 * This custom dialog will only be shown for client-side navigation. The browser's default confirmation dialog will be shown for server-side navigation.
 * (This is a browser limitation that we can't work around.)
 *
 * It uses the useNavigationGuard hook from the next-navigation-guard library under the hood, but has some hacky code to work around a bug in that library.
 */
export function NavigationGuardAlertDialog({ enabled, title, description, continueLabel, exitLabel }: NavigationGuardAlertDialogProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [attemptedNavigation, setAttemptedNavigation] = useState<NavigationGuardParams | null>(null);
  const [isProceeding, setIsProceeding] = useState(false);

  const router = useRouter();

  useNavigationGuard({
    enabled,
    // This option is meant to be used to show the browser's default confirmation dialog, but we can hook into it to show our own dialog.
    confirm: guardParams => {
      // If the user has chosen to proceed with the navigation, let them do it.
      if (isProceeding) {
        return true;
      }

      // Show our own dialog
      setIsOpen(true);
      // And record the attempted navigation so we can perform it after the user has confirmed the dialog
      setAttemptedNavigation(guardParams);
      // Prevent the navigation for now.
      return false;
    },
  });

  // If they choose to proceed with the navigation, perform it.
  const handleProceed = () => {
    if (attemptedNavigation) {
      // Set the flag to prevent the navigation from being blocked again.
      setIsProceeding(true);

      // Add an 0 second timeout to push this to the end of the event loop.
      // This will ensure that isProceeding is set before the navigation is performed.
      setTimeout(() => {
        // Find out what they were trying to do
        const action = attemptedNavigation.type as keyof AppRouterInstance;

        // Use the router to do it.
        router[action](attemptedNavigation.to);
      }, 0);
    }
  };

  return (
    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle className="text-red-500 font-semibold">{title || "Are you sure you want to leave?"}</AlertDialogTitle>
          <AlertDialogDescription className="pt-2 text-black">{description || <>You have unsaved changes.</>}</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter className="flex-row justify-between sm:justify-between">
          <AlertDialogCancel>{continueLabel || "Stay on this page"}</AlertDialogCancel>
          <AlertDialogAction onClick={handleProceed} className="bg-red-600 hover:bg-red-700 text-white">
            {exitLabel || "Exit without saving"}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

It can be used like this:

{/* Block navigation except for when calculating */}
<NavigationGuardAlertDialog enabled={!isCalculating} />

I'm still testing edge cases but it seems to work with Link and page router:

• When a client-side navigation is triggered, navigation is blocked and the dialog is shown
• If the user clicks proceed, their navigation continues
• For server/browser navigations tthe default browser confirmation popup is shown (this is a browser limitation.)