Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to to make sheet open but inside dropdown menu #1685

Closed
victormongi opened this issue Oct 6, 2023 · 9 comments
Closed

How to to make sheet open but inside dropdown menu #1685

victormongi opened this issue Oct 6, 2023 · 9 comments
Labels
Stale

Comments

@victormongi
Copy link

victormongi commented Oct 6, 2023 •
edited
Loading

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

floriaaan commented Oct 8, 2023 •
edited
Loading

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>

@Andi365
Copy link

Andi365 commented Oct 11, 2023

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!

@MrgSub MrgSub mentioned this issue Oct 29, 2023
Open
@shadcn shadcn added the Stale label Feb 13, 2024
@shadcn
Copy link
Collaborator

shadcn commented Feb 25, 2024

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.

@shadcn shadcn closed this as completed Feb 25, 2024
@Acapovilladev
Copy link

Acapovilladev commented Mar 23, 2024 •
edited
Loading

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.

@hqasmei
Copy link

hqasmei commented May 8, 2024

@Acapovilladev did you figure this out? facing the same issue

@kasvith
Copy link

kasvith commented May 23, 2024

im having the same issue opening a sheet from a dropdown menu item. sheet closes automatically

@viniciuscolodetti
Copy link

@Acapovilladev did you solve it? I also would like to open different sheets based dropdown menu item selected.

@viniciuscolodetti
Copy link

viniciuscolodetti commented Jul 31, 2024 •
edited
Loading

I solved the problem of open different sheets using a popover instead of dropdown menu.

The single problem is the popover don't close on open the sheet

@guscsales
Copy link

guscsales commented Aug 21, 2024 •
edited
Loading

The main issue is that React component for Sheet is inside the DropdownMenuItem, so after selecting an option, the item is removed from the render tree, you can see it using the React Dev Tools.

So, I solve the issue using the open from Drawer and onSelect from dropdown item, here's an example:

export default function Component() {
  const [open, setOpen] = React.useState('');

  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <ButtonIcon variant="outline" icon={LuMoreHorizontal} />
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-56" align="end">
          <DropdownMenuGroup>
            <DropdownMenuItem onSelect={() => setOpen(true)}>
              <LuFileEdit className="mr-2 h-4 w-4" />
              <span>View info</span>
            </DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
      <Sheet
        open={open}
        onOpenChange={setOpen}
      >
        ...
      </Sheet>
    </>
  );
}

For my specific case, I mixed with DataTable also, the idea is the same, I just forward the data to "columns" and add the capacity to open different sheets. You can check on this code here (on my code I rename sheet to drawer).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Stale
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@shadcn @guscsales @victormongi @floriaaan @kasvith @hqasmei @Andi365 @viniciuscolodetti @Acapovilladev