ui How to to make sheet open but inside dropdown menu

trafficstars

How to to make sheet open but inside dropdown menu? Im trying but the sheet imidietly close. thank you.

Oct 06 '23 01:10 victormongi

Hello, I had the same issue and I fixed it by changing the <Sheet> root component to the top of the <DropdownMenu> component.

Don't forget to add the modal={false} to the <DropdownMenu> or the Sheet will toggle "pointer-events:none;" on <body> and the page will not have events after closing the sheet

<Sheet>
        <DropdownMenu modal={false}>
          <DropdownMenuTrigger>
            <>
              <span className="sr-only">Open menu</span>
              <MoreHorizontal className="h-4 w-4" />
            </>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="p-2">
            <DropdownMenuLabel>Actions</DropdownMenuLabel>
            <DropdownMenuItem>
              <SheetTrigger>Edit</SheetTrigger>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
        <SheetContent>...</SheetContent>
      </Sheet>

Oct 08 '23 14:10 floriaaan

Got somewhat the same issue when trying to trigger a modal when a dropdown element was "active", this triggered "pointer-events:none;" on body. Applied modal={false} and fixed the problem!

Nice, thanks Floriaaan!

Oct 11 '23 11:10 Andi365

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.

Feb 25 '24 23:02 shadcn

Any idea how can i have a dropdownmenu with two or more options, and each option open a different sheet modal? For example: when clicking on options it triggers the dropdownmenu which has: 1. new incidence, 2. edit selected incidence, 3. modify status. Each option should trigger different sheets forms.