Next.js Discord

Discord Forum

closing the modal window does not work with <Link /> and [...catchAll]

Unanswered
oxmaster posted this in #help-forum
Open in Discord
oxmasterOP
The method specified here does not work and for some reason, instead of removing the @auth elements, it does not remove them
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#closing-the-modal

11 Replies

oxmasterOP
(.)signin 
import { PopUp, SignIn } from '@/shared';

export default function SignInPage() {
  return (
    <PopUp
      modal={true}

      className="w-fit rounded-[1.25rem]">
      <SignIn />
    </PopUp>
  );
}
When you click on the cross, the window does not close
import { FormSignIn } from '@/entities/User';
import { X } from 'lucide-react';
import Link from 'next/link';

export const SignIn = () => {
  return (
    <div className="relative bg-white p-4">
      <Link href="/" className="absolute right-3 top-4">
        <X />
      </Link>
      <p className="stn_title text-xl">Sign In</p>
      <FormSignIn />
    </div>
  );
};
Although it is written that: When using the Link component to navigate away from a page that shouldn't render the @auth slot anymore, we use a catch-all route that returns null.
PopUp: 
'use client';

import { useRouter } from 'next/navigation';
import { ComponentProps, useEffect, useRef } from 'react';
import ReactFocusLock from 'react-focus-lock';

type PopUpProps = {
  modal?: boolean;
} & ComponentProps<'dialog'>;

export const PopUp = ({ className, children, modal, ...props }: PopUpProps) => {
  const ref = useRef<HTMLDialogElement>(null);
  const router = useRouter();

  useEffect(() => {
    const dialog = ref.current;

    if (modal) {
      dialog?.showModal();
    } else {
      dialog?.show();
    }

    document.body.style.overflow = 'hidden';

    return () => {
      // dialog?.close();
      document.body.style.overflow = 'auto';
    };
  }, [modal]);

  useEffect(() => {
    console.log('RETURN VALUE:', ref?.current?.returnValue);
  }, [ref?.current?.returnValue]);

  function onDismiss() {
    router.back();
  }

  return (
    <ReactFocusLock>
      <dialog className={className} onClose={onDismiss} ref={ref} {...props}>
        {children}
      </dialog>
    </ReactFocusLock>
  );
};
Your example is also implemented on router.back(): https://github.com/vercel/nextgram
oxmasterOP
Next.js 14.1.1 canary 36
oxmasterOP
updated to 14.1.1 canary 51 and still doesn't work