Unable to drag Plotly js rangeslider inside Dialog

[Lexachoc]

Bug report

Current Behavior

When putting the Plotly js plot inside the Dialog, the draggable rangeslider of Plotly plot is unable to use.

I guess this is a bug from Dialog, as the plot works fine without Dialog. But I'm not 100% sure.

It will throw the following error when trying to drag the rangeslider

Uncaught TypeError: Cannot set properties of undefined (setting '_guiEditing')

I suspect that react-remove-scroll might be the reason why the drag event of the plotly library (d3) does not work.

When using <Dialog.Root modal={false}>, the range slider is working as expected.

Expected behavior

I expect the draggable rangeslider will work when inside the Dialog.

Reproducible example

The plot outside the Dialog is fine, both the range slider and the plot can be dragged. But the range slider of the plot inside the Dialog cannot be dragged and causes an error (from Plotly).

The style="pointer-events: none;" on body is not allowing me to drag the rangeslider inside the Dialog.

https://codesandbox.io/p/sandbox/plotly-inside-dialog-7vlg2r

Your environment

Software	Name(s)	Version
Radix Package(s)	radix-ui/react-dialog	1.1.2
React	n/a	18.3.1
Browser	Chrome	130.0.6723.117 (Official Build) (64-bit)
Assistive tech	n/a	n/a
Node	n/a	n/a
npm/yarn	n/a	n/a
Operating System	Windows 10 Pro	22H2

[Lexachoc]

As a workaround, I set the Dialog with modal={false} and use a custom Overlay (implement the react-remove-scroll on my own) to simulate the same effect of modal={true}. So it will not add the style="pointer-events: none;" on body which can allow the rangeslider to be dragged.