Dropdown menu not closing while suspense fallback loading

[jersoncarin]

Bug report

Current Behavior

The dropdown menu will not close when suspense fallback is loading

https://github.com/radix-ui/primitives/assets/63774442/3730f0db-8b50-462d-9e6a-10c6d6c45127

Expected behavior

The dropdown menu will close when the suspense fallback loading

Reproducible example

Here is my dropdown menu

<DropdownMenu>
  <DropdownMenuTrigger className="rounded-full">
     // My Trigger here basically the image
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end" className="w-52">
    <DropdownMenuItem
      className="cursor-pointer w-[12.4rem] mb-1"
      asChild
    >
      <Link to={`/@${user?.username}`} className="flex w-full gap-x-3">
        <img
          className="h-10 w-10 rounded-full overflow-hidden flex-shrink-0"
          style={{
            objectFit: 'cover',
            objectPosition: 'center',
          }}
          src={user?.profile_photo}
        />
        <div className="overflow-hidden w-36">
          <div className="flex flex-col">
            <span className="text-foreground text-sm font-bold overflow-hidden overflow-ellipsis whitespace-nowrap">
              {user?.name}
            </span>
            <span className="text-muted-foreground overflow-hidden overflow-ellipsis text-xs whitespace-nowrap">
              {`@${user?.username}`}
            </span>
          </div>
        </div>
      </Link>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

App.tsx

Loader.tsx Note that the Loader component is just a svg

Additional context

I tried to add z index on the Loader but no luck

Your environment

Software	Name(s)	Version
Radix Package(s)	Dropdown Menu	^2.0.6
React	n/a	18.2.0
Browser	Chrome	117. 0.0
Assistive tech
Node	n/a
npm/yarn
Operating System	Windows	11

[jainamdoshi]

I have the same issue. I think it is not because of any suspense loading. I think this is produced when have a Link component inside the DropdownMenuItem component.

I suspect the link's onClick behaviour overrides the dropdown menu item's onClick behaviour.

Have you been able to find any solution?

[benoitgrelard]

If they are composed a link is composed correctly with the item, it should close just fine, you can see more info and example in this comment.

[g3ano]

For anyone facing the same issue when using react-router, you can use useNavigate for navigation, and wrap the whole thing inside a transition with useTransition. This won't trigger the suspense fallback, thus allowing the dropdown menu to close.