Material-ui: [Dialog] TextField inside draggable dialog does not work in Chrome

[devdanco]

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

Expected Behavior 🤔

I should be able to type something into TextField when my Dialog is draggable.

Current Behavior 😯

I have draggable Dialog and insde is TextField .. I cannot type anything inside TextField in chrome but in firefox it is working.

Steps to Reproduce 🕹

Here is the example: Codesandbox example

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.9.0 |
| React | v16.8.5 |
| Browser | Firefox v66.0.3 and Chrome v74.0.3729.108 |

[oliviertassinari]

@devdanco Thank you for reporting this problem. I found a similar issue in https://github.com/mzabriskie/react-draggable/issues/314.

What do you think of this diff?

diff --git a/docs/src/pages/demos/dialogs/DraggableDialog.tsx b/docs/src/pages/demos/dialogs/DraggableDialog.tsx
index 17d35b2ca..ec83ff71e 100644
--- a/docs/src/pages/demos/dialogs/DraggableDialog.tsx
+++ b/docs/src/pages/demos/dialogs/DraggableDialog.tsx
@@ -10,56 +10,54 @@ import Draggable from 'react-draggable';

 function PaperComponent(props: PaperProps) {
   return (
-    <Draggable>
+    <Draggable cancel={'[class*="MuiDialogContent-root"]'}>
       <Paper {...props} />
     </Draggable>
   );
 }

-class DraggableDialog extends React.Component {
-  state = {
-    open: false,
-  };
+function DraggableDialog() {
+  const [open, setOpen] = React.useState(false);

-  handleClickOpen = () => {
-    this.setState({ open: true });
+  const handleClickOpen = () => {
+    setOpen(true);
   };

-  handleClose = () => {
-    this.setState({ open: false });
+  const handleClose = () => {
+    setOpen(false);
   };

-  render() {
-    return (
-      <div>
-        <Button variant="outlined" color="primary" onClick={this.handleClickOpen}>
-          Open form dialog
-        </Button>
-        <Dialog
-          open={this.state.open}
-          onClose={this.handleClose}
-          PaperComponent={PaperComponent}
-          aria-labelledby="draggable-dialog-title"
-        >
-          <DialogTitle id="draggable-dialog-title">Subscribe</DialogTitle>
-          <DialogContent>
-            <DialogContentText>
-              To subscribe to this website, please enter your email address here. We will send
-              updates occasionally.
-            </DialogContentText>
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={this.handleClose} color="primary">
-              Cancel
-            </Button>
-            <Button onClick={this.handleClose} color="primary">
-              Subscribe
-            </Button>
-          </DialogActions>
-        </Dialog>
-      </div>
-    );
-  }
+  return (
+    <div>
+      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
+        Open form dialog
+      </Button>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        PaperComponent={PaperComponent}
+        aria-labelledby="draggable-dialog-title"
+      >
+        <DialogTitle style={{ cursor: 'move' }} id="draggable-dialog-title">
+          Subscribe
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            To subscribe to this website, please enter your email address here. We will send updates
+            occasionally.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="primary">
+            Cancel
+          </Button>
+          <Button onClick={handleClose} color="primary">
+            Subscribe
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
 }

Do you want to submit a pull request? :)

[devdanco]

@oliviertassinari thank you :) this solved the issue. I did not know about cancel props for Draggable. I would love to submit a pull request but this will be my first PR. So I need to change only docs ?

[oliviertassinari]

@devdanco It would be a perfect first contribution :). Changing the documentation should be enough. ⚠️ this is on the next branch. The demo that we need to change is docs/src/pages/demos/dialogs/DraggableDialog.tsx.

[devdanco]

@oliviertassinari Ok I will try to submit PR, but first I need to read your contribution README file ;)

[devdanco]

@oliviertassinari I was so happy with this solution but there is a problem. In development mode everything works as expected but in production mode it does not work only in firefox. What could be the cause of the problem ?

[oliviertassinari]

This is a v4 patch. Doesn't work with v3.

[devdanco]

Ok thank you ;)