Preventing overlay of sheet component

[ImamJanjua]

Describe the bug

Hi guys, I am building a drag and drop functionality. So normally, as you can see in the first example, when the blue card is dragged to the waiting list, it will be added to the list since the drag recognizes that it has been dragged to the list. However, when I use the sheet component, it doesn't work because it can't recognize that there is a sheet since it's an overlay. I even tried to remove the z-index from the list and give a higher one to the blue card, but that's not working. Can somebody help?

Affected component/components

Sheet

How to reproduce

https://github.com/shadcn-ui/ui/assets/137432044/80c96730-f447-42b1-b7a2-f562fc1d855f

Codesandbox/StackBlitz link

.

Logs

.

System Info

.

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[kevinmitch14]

How about removing the overlay in ui/components/sheet.tsx?

const SheetContent = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Content>,
  SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
  <SheetPortal>
-    <SheetOverlay />
    <SheetPrimitive.Content
      ref={ref}
      className={cn(sheetVariants({ side }), className)}
      {...props}
    >
      {children}
      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
        <Cross2Icon className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </SheetPrimitive.Close>
    </SheetPrimitive.Content>
  </SheetPortal>
))

[ImamJanjua]

I tried, still the overlay is there

[servesh-chaturvedi]

Could u please share a sandbox example @ImamJanjua ?

[ImamJanjua]

https://codesandbox.io/p/github/ImamJanjua/codeSandBox/main?import=true&embed=1&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clttynaku00063b6gvjsg8ltu%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clttynakt00023b6g757heo1g%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clttynakt00043b6gbyjjdiib%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clttynakt00053b6gep3boosd%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B40%252C60%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clttynakt00023b6g757heo1g%2522%253A%257B%2522id%2522%253A%2522clttynakt00023b6g757heo1g%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clttynakt00053b6gep3boosd%2522%253A%257B%2522id%2522%253A%2522clttynakt00053b6gep3boosd%2522%252C%2522activeTabId%2522%253A%2522clttyt13l01033b6gabcaxptt%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A5173%252C%2522id%2522%253A%2522clttyt13l01033b6gabcaxptt%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clttynakt00043b6gbyjjdiib%2522%253A%257B%2522id%2522%253A%2522clttynakt00043b6gbyjjdiib%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clttynakt00033b6gs0i0lpah%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clttysky6001idmfkg0z25kt6%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clttynakt00033b6gs0i0lpah%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[ImamJanjua]

U can comment out the the other waitlist example to see how it actually works

[servesh-chaturvedi]

It is not due to overlay but incorrect ref setting. You need to set the ref on SheetContent like: <SheetContent ref={setNodeRef} style={style}>

Also change the style from color to opacity to see the same effect as with the working demo.

[ImamJanjua]

Thanks, it worked. But if i drag the blue card to the sheet, its not visible and goes under the sheet, even if i give it a higher z-index

[ImamJanjua]

yes and the functionality is working so when i drop the blue card to the sheet than the card gets added to the list. The only thing is that when I drag the blue card to the sheet, than it gets dragged under the list. I mean the opacity can be changed and than the card is a bit visible but normally it should just appear on top on the sheet.

https://github.com/shadcn-ui/ui/assets/137432044/774595df-cee3-43b6-8e6f-33bbdcb49aae

[servesh-chaturvedi]

Setting zIndex: 1 in the style object of PatientCard seems to be working. Do u want it like it should change only when it appears over the sheet? @ImamJanjua

[ImamJanjua]

I tried but not working for me

[servesh-chaturvedi]

Checkout this jam: https://jam.dev/c/642ae23c-1e0b-4b27-8ed7-326bf486bd4c @ImamJanjua

[airone01]

Consider closing the Issue if the jam worked @ImamJanjua