Next JS Radix UI DropdownMenu and Avatar Issue

Next.js
1

I was stuck on video “6 - Adding a Dropdown Menu” in the Authentication section of the NextJS Project: Build an Issue Tracker series.

My problem is that clicking the Avatar does not trigger the DropDownMenu. When I change the Avatar to a simple Text it works.

I haven’t figured out how to make this work with the Avatar. Anyone else have this issue?

This works:

                <DropdownMenu.Root>
                  <DropdownMenu.Trigger>
                    <Text size="2">{session.user.email}</Text>
                  </DropdownMenu.Trigger>
                  <DropdownMenu.Content>
                    <DropdownMenu.Item>
                      <Link href="/api/auth/signout">Sign Out</Link>
                    </DropdownMenu.Item>
                  </DropdownMenu.Content>
                </DropdownMenu.Root>

This doesn’t work:

                <DropdownMenu.Root>
                  <DropdownMenu.Trigger>
                    <Avatar src={session.user.image}
                      fallback="?"
                      size="2"
                      radius="full"
                      className="cursor-pointer" />
                  </DropdownMenu.Trigger>
                  <DropdownMenu.Content>
                    <DropdownMenu.Label>
                      <Text size="2">{session.user.email}</Text>
                    </DropdownMenu.Label>
                    <DropdownMenu.Item>
                      <Link href="/api/auth/signout">Sign Out</Link>
                    </DropdownMenu.Item>
                  </DropdownMenu.Content>
                </DropdownMenu.Root>
2

I had the same issue as this. So what I did was inside the Text component I add the Avatar. It worked for me.

<DropdownMenu.Trigger>
      <Text>
             <Avatar
                 src={session.user?.image!}
                 fallback="?"
                 size="2"
                 radius="full"
                 className="cursor-pointer"
                 referrerPolicy="no-referrer"    
             />
    </Text>
</DropdownMenu.Trigger>
3 Likes
3

Because I wanted to use Credential Provider instead, I provided a default image to bypass the issue.

  <Avatar
    src={session.user!.image! ? session.user!.image! : "https://link-to-default-image.jpg"}
    fallback="?"
    size="2"
    radius="full"
    className="cursor-pointer"
  />
4

This one works for me. Thank you!