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.

[Lexachoc]

https://github.com/theKashey/react-remove-scroll/issues/123#issuecomment-2493252441

However there is one moment that is a little suspicious - this library is never setting pointer-events as inline style, that is actually Radix doing. My approach here is to work via classes, and these classes will only be added if inert attribute is set.

May be the ball is still on the Radix side

So it seems that the inline style pointer-events on the body is introduced by Radix instead of react-remove-scroll.