Dragged Element Includes Border When Partially Out of View in List

[robavs]

In my original application, I have multiple complex components displayed in a list. Each component is different and quite intricate. Additionally, every specific component consists of many nested components, and the CSS is somewhat complex.

When an element is partially out of view due to the scroll position and I initiate a drag action at that moment, a bug occurs where the dragged element also includes the border from the component below it, as shown in the attached image.

Code Example can be found here

I know that this issue can be avoided using React Portal and the setCustomNativeDragPreview method as discussed in documentation. However, I only know how to apply this solution when dealing with a single unique simple component with very little styles applied. In my case, I have a Wrapper component that receives complex a specific child component as a prop and assigns it the ability to be draggable.

So, my question is: how can I ensure that any component received as a prop in the Wrapper component, regardless of its complexity, is rendered identically using React Portal? Or, if there is another way to solve this issue, I would appreciate any suggestions.

[michaelabrahamian]

Hey @robavs, you should be able to follow the same approach from the documentation you linked. It's a matter of rendering the drag preview variant of your component in a portal, so that the browser can take a photo of this element without being clipped or impacted by anything else.

Here's a codesandbox branch based on your example that implements this:
https://codesandbox.io/p/github/robavs/DnD-bug/csb-lhljkq/draft/distracted-gagarin