Next.js Discord

Discord Forum

NextJs/Shadcn ui

Answered
Polish posted this in #help-forum
Open in Discord
PolishOP
I was using sahdcn/ui , and faced this strange behaivour,This is the addNoteCard compoent
'use client'
import { Card, CardContent, CardHeader } from "../ui/card"
import { Plus } from "lucide-react"
export function AddNoteCard() {
  return (
    <>
      <Card className="min-w-[200px] min-h-[200px] hover:cursor-pointer" >
        <CardContent className="flex items-center justify-center h-full">
          <Plus color={'blue'} height={50} width={50} />
        </CardContent>
      </Card>
    </>
  )
}


and when i implement that like this, i doesnot work(doesnot trigger the dialog)
return (
    <Dialog>
      <DialogTrigger asChild>
        <AddNoteCard />
      </DialogTrigger>
   ----------------


BUT when i wrap the card into div it work fine
<Dialog>
   <DialogTrigger asChild>
        <div>
          <AddNoteCard />
        </div>
      </DialogTrigger>


Can some body explain me why this happens
Answered by B33fb0n3
the ref won't be passed to your own component, so it won't trigger the dialog. Either pass the ref with it (using [forwarding ref](https://react.dev/reference/react/forwardRef)) or use another component between it that does that (in this case the div).
View full answer

3 Replies

MarkMiklos
Your AddNoteCard is in a fragment #Unknown Channel for no reason, have you tried to remove it?
It might not solve your problem, but could be one issue.
Answer
B33fb0n3