Trigger dialog from sheet

[christoffer-nextase]

How can i trigger a dialog and close the sheet component at the same time?

I have tried to set it up like this, but the sheet doesn't close:

Login.tsx

<Dialog>
  {trigger} 
   <DialogContent className="sm:max-w-[425px]">
     <DialogHeader>
       <DialogTitle>Logga in</DialogTitle>
     </DialogHeader>
     <form
       onSubmit={handleSubmit}
       className="mt-8 space-y-6"
       action="#"
       method="POST"
     >
       <LoginFormBody loading={loading} />
     </form>
   </DialogContent>
</Dialog>

LoginBar.tsx

<Login>
 <SheetClose asChild>
   <DialogTrigger className="cursor-pointer">
     <Button variant="default" size="sm" className="flex-1">
       Logga in
     </Button>
   </DialogTrigger>
 </SheetClose>
</Login>

Current result:

When the login button is clicked inside the sheet:

[limitless-dev]

You can handle that manually with the open and onOpenChange props in the Sheet component.

const [sheetOpen, setSheetOpen] = useState<boolean>(false);

<Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
{/*   */}
</Sheet>

Now when ever the Login is open, you do setSheetOpen(false)

Here is an example I used to close menu drop down when use clicks on edit (which opens a sheet):

<Sheet
  open={sheetOpen}
  onOpenChange={() => {
    setSheetOpen(!sheetOpen);
    setMenuOpen?.(!sheetOpen);
    }}
>
{/*   */}
</Sheet>