I’m getting the following warning in my JavaScript console every time I open my Sheet component.
Warning: Missing
Descriptionoraria-describedby={undefined}for {DialogContent}.
I’m confused because I don’t use any Dialog components in my sheet, so why is this happening and how do I get rid of this warning? Here’s my relevant code for the Sheet component:
<Sheet open={openMenu} onOpenChange={setOpenMenu}>
<SheetTrigger asChild>
<Button variant="ghost">
<MenuIcon color={location.pathname === "/" ? "white" : "black"} size="2em" />
</Button>
</SheetTrigger>
<SheetContent side="right" className="fixed z-50">
<div >
<p>Sheet Content</p>
</div>
</SheetContent>
</Sheet>
The Shadcn Sheet component is an extension of the Dialog component, and so <SheetContent> requires a <DialogDescription> just like a regular Dialog component does. Just add a dialog description underneath your sheet content and the error will go away.
<SheetContent side="right">
<DialogTitle>Menu</DialogTitle> // Add a dialog title
</SheetContent>