RAC ListBox preview bug on safari when using a combination of position relative and absolute

[fredericrous]

Provide a general summary of the issue here

In ListBox component, from RAC, we are locked with a DragPreview that renders inside ListBox. When ListBox is inside a complex layout using a combination of position relative and absolute, the drag preview, on safari, gets shown dark

🤔 Expected Behavior?

The provided DragPreview is rendered in all browsers

😯 Current Behavior

The provided DragPreview is rendered buggy in Safari, I see it at a different position than what I expect and the div is dark

💁 Possible Solution

• allow us to replace the full preview component, including DragPreview

or

• implement createPortal to render DragPreview outside of the dom

or

• allow us to specify a portal string where the portal would be created

🔦 Context

No response

🖥️ Steps to Reproduce

• I'm using reactflow
• I render a listbox inside nodes
• I then drag an item from one listbox to another
• drag preview is off on Chrome for IOS and on Safari for Desktop

Version

1.2.0

What browsers are you seeing the problem on?

Chrome, Safari

If other, please specify.

Safari 17.3.1, Chrome for IOS v123.0.6312.52

What operating system are you using?

macos 12.5, ios 17.4

🧢 Your Company/Team

No response

🕷 Tracking Issue

similar issue: https://github.com/adobe/react-spectrum/issues/4797

[fredericrous]

@BenBeattieHood I see in the code a property UNSTABLE_portalContainer for modal, tooltip and popover. It looks like drag preview were forgotten