[Bug] Dialogs and sheets cannot coexist

[lucas-barake]

Description

While attempting to use both, the dialog and sheet components within the same view, the sheet component behaves like a dialog instead of opening on the designated side.

To Reproduce

Render a dialog and a sheet component within the same page, as evidenced in this example or here.

The components don't necessarily have to be side-by-side. As long as they are rendered in the same view, the issue arises.

Expected Behavior:

I expected the dialog component to open as a modal in the center of the view, while the sheet component should open on the designated side (right, left, top, or bottom).

Actual Behavior:

Instead, the sheet component behaves like a dialog and opens in the middle of the view, overlapping the dialog component (or vice-versa, the dialog behaves like a sheet).

This behavior is inconsistent with the intended functionality of the components.

---

I checked the documentation and examples, but I did not come across any explicit mention of this particular limitation. Pardon me if I overlooked this information. Thanks in advance!

[its-monotype]

-const Sheet = SheetPrimitive.Root
+const Sheet = ({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Root>) => (
+  <SheetPrimitive.Root {...props} />
+)

[its-monotype]

And in your example you messed up sheet content with dialog content https://github.com/lucas-patron/shadcnui-sheet-dialog/blob/4c54e0c81dcdacea3e96f2af149caae06eb29351/src/pages/index.tsx#LL38C8-L38C8

[lucas-barake]

And in your example you messed up sheet content with dialog content https://github.com/lucas-patron/shadcnui-sheet-dialog/blob/4c54e0c81dcdacea3e96f2af149caae06eb29351/src/pages/index.tsx#LL38C8-L38C8

Whoops, silly mistake. Didn't notice the use of dialog content. Oddly enough, while it fixed it in the minimal example, it didn't in my own project.

-const Sheet = SheetPrimitive.Root
+const Sheet = ({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Root>) => (
+  <SheetPrimitive.Root {...props} />
+)

Anyway, this fixed it for me - It's worth noting that this bit isn't included in the official code.

Thanks!

[shadcn]

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.