BUG : sheet isn't opening

[anthonyissa]

Some things to note: npx shadcn-ui add sheet didn't install @radix-ui/react-dialog needed in sheet.tsx. I think this might be linked to radix-ui because every component linked to radix isn't working.

package.json

{
  "name": "rocroy",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-dialog": "^1.0.4",
    "@radix-ui/react-slot": "^1.0.2",
    "class-variance-authority": "^0.4.0",
    "clsx": "^1.2.1",
    "lucide-react": "0.105.0-alpha.4",
    "next": "^13.4.4",
    "next-themes": "^0.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sharp": "^0.31.3",
    "tailwind-merge": "^1.12.0",
    "tailwindcss-animate": "^1.0.5"
  },
  "devDependencies": {
    "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
    "@types/node": "^17.0.45",
    "@types/react": "^18.2.7",
    "@types/react-dom": "^18.2.4",
    "@typescript-eslint/parser": "^5.59.7",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.41.0",
    "eslint-config-next": "13.0.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-tailwindcss": "^3.12.0",
    "postcss": "^8.4.24",
    "prettier": "^2.8.8",
    "tailwindcss": "^3.3.2",
    "typescript": "^4.9.5"
  }
}

header.tsx

import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Menu } from "lucide-react";
import Link from "next/link";

export default function Header() {
  return (
    <nav className="px-5 md:px-20 md:py-2 py-3 border-b border flex items-center justify-between">
      <nav className="flex gap-3 items-center">
        <Link href="/" className="font-bold">
          Anciens de Rocroy
        </Link>
        <Button variant="ghost" className="hidden md:block">
          <Link href="/">Home</Link>
        </Button>
      </nav>
      <nav className="flex items-center">
        <Sheet>
          <SheetTrigger className="md:hidden">
            <Menu />
          </SheetTrigger>
          <SheetContent>
            <SheetHeader>
              <SheetTitle>Are you sure absolutely sure?</SheetTitle>
              <SheetDescription>
                This action cannot be undone. This will permanently delete your
                account and remove your data from our servers.
              </SheetDescription>
            </SheetHeader>
          </SheetContent>
        </Sheet>
      </nav>
    </nav>
  );
}

[mbvalent]

<SheetTrigger className="md:hidden" asChild>
  <Menu />
</SheetTrigger>

[anthonyissa]

This is the trigger button

[Thisisjuke]

Hey,

Don't know if its the full code of your header or if you are cleaning things to keep the issue clear.

But small warning on something I found out some days ago : when you have an element that trigger a Sheet inside another Element that uses React Portal (like Popover), things can be broken: the easy work around is to add a useState and connect it to your sheet and Popover open={open} and onOpenChange={setOpen}.

Then => close the Popover manually => Open the Sheet Manually.

export const SidePanel = ({ title, isOpen, setIsOpen, children }: SidePanelProps) => {
    return (
        <Sheet open={isOpen} onOpenChange={setIsOpen}>
            <SheetContent>
                <SheetHeader>
                    <SheetTitle>{title}</SheetTitle>
                    <SheetDescription>
                        <div className={'flex flex-col gap-y-2'}>
                            {children}
                        </div>
                    </SheetDescription>
                </SheetHeader>
            </SheetContent>
        </Sheet>
    )
}

from: https://www.radix-ui.com/docs/primitives/components/dialog#close-after-asynchronous-form-submission

[kenora91]

Hey,

Don't know if its the full code of your header or if you are cleaning things to keep the issue clear.

But small warning on something I found out some days ago : when you have an element that trigger a Sheet inside another Element that uses React Portal (like Popover), things can be broken: the easy work around is to add a useState and connect it to your sheet and Popover open={open} and onOpenChange={setOpen}.

Then => close the Popover manually => Open the Sheet Manually.

export const SidePanel = ({ title, isOpen, setIsOpen, children }: SidePanelProps) => {
    return (
        <Sheet open={isOpen} onOpenChange={setIsOpen}>
            <SheetContent>
                <SheetHeader>
                    <SheetTitle>{title}</SheetTitle>
                    <SheetDescription>
                        <div className={'flex flex-col gap-y-2'}>
                            {children}
                        </div>
                    </SheetDescription>
                </SheetHeader>
            </SheetContent>
        </Sheet>
    )
}

from: https://www.radix-ui.com/docs/primitives/components/dialog#close-after-asynchronous-form-submission

it doesn't work and crashes the NextJS application

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.