Material-ui: Dialog transition doesn't exit as expected

[duongdev]

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

Expected Behavior

When exit a dialog, the dialog paper should disappear with the passed transition (zooms out if the transition is Grow)

Current Behavior

The dialog paper disappears immediately, but the backdrop disappears normally.

Steps to Reproduce (for bugs)

1. Open the dialog with Grow transition
2. Close the opened dialog
3. https://codesandbox.io/s/k01k060n73

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI |1.0.0-beta.20|
| React |16.0.0|
| browser |64.0.3265.0 (Official Build) canary (64-bit)|

[alexgzhou]

I have the similar situation, when I open a Dialog with transition prop and feed it with props => <Slide direction="up" { ...props } />, then I close the Dialog, it disappears, but I can't interact with any button/textfield on the screen; when I comment out the transition prop in Dialog, everything works fine. It seems that the backdrop did not disappear.

[oliviertassinari]

I'm on it. The fix is going to remove some code. I love that!

[Cheonsoon]

@oliviertassinari Hi, dear. The transition still not work as expected, or were slide transition needn't to work the same as grow ? After having seen the merged codes..

[Cheonsoon]

@oliviertassinari As in previous next release, slide works the same as grow.

[danh293]

I have the same issue as @alexgzhou still in v1.2.1. Nothing on the page can be clicked once the modal has disappeared.

[jdolinski1]

This problem still persists ("@material-ui/core": "3.6.0",).
Passing TransitionComponent prop like this:

                <Dialog
                    fullScreen={true}
                    open={this.props.open}
                    TransitionComponent={props => {
                        return <Slide direction="up" {...props} />
                    }}>

The slide in animation works fine, but after closing the dialog (and passed prop in to false), the closing animation is not slide out but fade out + the interaction with app stops working ie. i cannot click on anything.

[oliviertassinari]

@jdolinski1 We don't support that, you need to create the transition component outside of the render method.

[jdolinski1]

Thanks for super quick response, that was it ❤️

[auppstrom]

I have the same behaviour with the dialog and transitionComponent. I have pretty much copied the code from the example in the documentation

function DialogTransition (props) {
  return <Slide direction='up' {...props} />;
};

<Dialog
      maxWidth='lg'
      open={isOpen}
      onClose={handleClose}
      onEscapeKeyDown={handleClose}
      TransitionComponent={DialogTransition}
    >

The dialog slides in as expected, but when I close it, it just disappears without any transition or fade.

[oliviertassinari]

@auppstrom Move the DialogTransition component creation outside of the render method.

[auppstrom]

@auppstrom Move the DialogTransition component creation outside of the render method.

It is outside the class that calls renders the Dialog.
class Inbox extends Component { render () { return ( <Request foo={xxxx} bar={yyyy} /> ); }

function DialogTransition (props) { return <Slide direction='up' {...props} />; };

const Request = ({ foo, bar }) => { return ( <Dialog TransitionComponent={DialogTransition} .... .... > ); };

[oliviertassinari]

@auppstrom Do you have a reproduction example?

[auppstrom]

@auppstrom Do you have a reproduction example?

Trying to reproduce in Codesandbox, but I just can't get the same behaviour.. Must be something with my environment.. Hmm.. I'll let you know if I figure it out

[auppstrom]

@auppstrom Do you have a reproduction example?

Trying to reproduce in Codesandbox, but I just can't get the same behaviour.. Must be something with my environment.. Hmm.. I'll let you know if I figure it out

I've FINALLY found where the behaviour deviates.
I had, for some reason (probably coding late'o'clock again) a boolean check whether to render the <Dialog /> or not - and also setting the isOpen prop.. When I removed the redundant boolean the problem was solved.
I have a codesandbox for anyone who'd want to see the stupid mistake.

[shashi-varne]

Hey, I have the same issue. My TransitionComponent is outside the render function. But still, No luck.
What I'm I doing wrong?
SlideTransition = (props) => { return <Slide direction="up" {...props} />; }

` fullWidth={true}
fullScreen={true}
style={{ margin: 0 }}
id="dropdown-in-modal-dialog"
paper={{
margin: '0px'
}}
TransitionComponent={this.SlideTransition}
open={this.props.parent.state.openPopUpInputDate}
onClose={this.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"

`