Material-ui: Draggable dialog?

[liesislukas]

https://material-ui-next.com/api/dialog/

Would love to have a flag to make dialog box draggable. It could have a draggable handle or just all dialog would be draggable.

I use a dialog box for settings and stuff behind the dialog changes when settings in the dialog are changed and sometimes dialog box just covers content behind it and simply drag would solve it and UX would be much better.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

[oliviertassinari]

@liesislukas This feature is outside the scope of the problems Material-UI try to solve. Let us know if you experience any issue integrating with a third party library. We are open to makes changes to ease the integration.

[goyney]

I'd like to chime in on this. I'm fine with using another plugin, but the Material-UI implementation of dialog doesn't really support this as well and I feel this should be reopened until it is addressed.

Using react-draggable, you can get the dialog into a movable state. However, the problem is that the backdrop ALSO moves with the dialog, which is not ideal. There is no way, between the two plugins that I can find, to separate those layers out, allowing only the dialog to be draggable.

<Draggable handle='.feedback-title'>
     <Dialog>
         <DialogTitle classes={{ root: 'feedback-title' }}>A Simple Modal</DialogTitle>
         <DialogContent>Content of this modal</DialogContent>
         {...}
     </Dialog>
</Draggable>

[oliviertassinari]

@goyney It should very likely be done the other way around:

<Dialog>
  <Draggable handle='.feedback-title'>
    <DialogTitle classes={{ root: 'feedback-title' }}>A Simple Modal</DialogTitle>
    <DialogContent>Content of this modal</DialogContent>
    {...}
  </Draggable>
</Dialog>

Please share the solution if you figure something out, it will help others :).

[goyney]

Trust me, I've tried all the combinations. That does nothing because the rendered Title and Content are already inside the Dialog that is attempting to be moved. The problem is the overlay.

I almost feel like the overlay shouldn't be assumed and there should be a new <DialogBackdrop /> component that must be included for it to show up. Or something other way to "wrap" just the dialog box via the <Dialog /> component.

This is impossible to do with the way <Dialog /> is implemented in MUI and requires a MUI change.

[oliviertassinari]

In this case, use the TransitionComponent property.

[goyney]

Nice, that seems to have done the trick. However, I am still getting one error in the log I would like to try and remedy. Any suggestions?

Warning: Material-UI: the modal content node does not accept focus.
For the benefit of assistive technologies, the tabIndex of the node is being set to "-1".

Again, I do not have direct access to the specific div it wants a tabIndex on, so I cannot go manually put it there. This error would just be noise that we don't want.

---

EDIT: A tabIndex: -1 on PaperProps did the trick. Thanks for your help.

[porluz]

Also having issues with Draggable and MUI, running into a "React.Children.only expected to receive a single React element child" Error. What am I doing wrong?

function DragComponent(props) {
  return <Draggable handle=".myHandle"/>;
}

<Dialog
          className="myHandle"
          TransitionComponent={DragComponent}
          ...
        >

[rogerjak]

@goyney Do you have a working code sample? I'd like a draggable dialog too, thanks!

[goyney]

@rogerjak Untested, but should give you enough to get it working.

import Draggable from 'react-draggable';
import { Dialog, DialogTitle } from '@material-ui/core';

...

return (
  <Dialog
    aria-labelledby='dialog-modal-title'
    PaperProps={{ tabIndex: -1 }}
    TransitionComponent={Draggable}
    TransitionProps={{ handle: '.dialog-title' }}
  >
    <DialogTitle classes={{ root: 'dialog-title' }} id='dialog-modal-title'>My Title</DialogTitle>
    ...
  </Dialog>
);

[nitupune]

Thanks for solution, I have used same it works find I am able to drag dialog.. But problem is when I close my dialog it close backdrop only and not full dialog... Please guide me for code changes.

[oliviertassinari]

If anyone has a working example, I would love to add it to the documentation!

[rogerjak]

The example from @goyney works for me, the rest of the code is just like a normal Dialog.

[Gurmindermultani]

Thanks for solution, I have used same it works find I am able to drag dialog.. But problem is when I close my dialog it close backdrop only and not full dialog... Please guide me for code changes.

This issue is still there, anyone able to solve this ?

[abhijeetahuja]

@oliviertassinari & @Gurmindermultani https://codesandbox.io/s/nnq98zlrrl

[oliviertassinari]

@abhijeetahuja Well done! Do you want to add a demo in the documentation? :)

[abhijeetahuja]

@oliviertassinari Sure, I would love to raise a pull request for the this draggable demo documentation.

[andrewcummings]

Here is a Popover implementation, in case people stumble across this issue looking for draggable solutions. Hopefully relevant enough, at least until demo documentation is available.

https://codesandbox.io/s/711pzp6110