Material-ui: Closing Dialog with transition blocks page interaction

[the-noob]

Using 1.0.0-beta.21.
I have something like this:

        <Dialog
          fullScreen
          open={this.addProductDialogOpen}
          transition={props => <Slide direction="up" {...props} />}
          onRequestClose={this.handleAddProductClose}
        >
          <AppBar className={classes.appBar}>
            <Toolbar>
              <IconButton
                color="contrast"
                disableRipple
                onClick={this.handleAddProductClose}
              >
                <CloseIcon />
              </IconButton>
              <Typography type="title" color="inherit" className={classes.flex}>
                Select product
              </Typography>
            </Toolbar>
          </AppBar>
          <DialogContent>
            <Autocomplete
              getOptions={() => options()}
              onSuggestionSelected={this.handleAddProduct}
            />
          </DialogContent>
        </Dialog>

When closing the dialog the <div data-mui-portal="true"> remains and, although the contents are not visible, it blocks any interaction with the page.
If I remove transition={props => <Slide direction="up" {...props} />} the div is removed on close.

I see the same behaviour (div remains attached) with the docs demo but there there's no obstruction.

Anything I can do do provide more info ?

[mbrookes]

Anything I can do do provide more info ?

USe the issue template in your issue report, and provide a reproducible example? 😄

[the-noob]

@mbrookes Please see this example https://codesandbox.io/s/vv7kwm7ko3
Once you close the dialog any interaction is blocked. (as far as I can see the backdrop div remains present with width:100%, height: 100%, opacity: 0

[mbrookes]

@the-noob If you're having trouble finding it, the issue template is here: https://github.com/mui-org/material-ui/edit/v1-beta/.github/ISSUE_TEMPLATE.md (otherwise you could have started a new issue and copied the template from there).

[oliviertassinari]

Duplicate of #8919

Move the transition component definition outside of the rendering method.

[the-noob]

The man, the myth, the living legend!
Any Amazon wishlist items or similar ? Great effort with this lib (unlike other people I won't name)!

[oliviertassinari]

@the-noob I'm happy to hear it's fixing your issue. I hope this case was better handled.

Any Amazon wishlist items or similar ? Great effort with this lib (unlike other people I won't name)!

Thank you! You can always support me or the community, an announcement is coming #9460 🎄 .