Closing Dialog with transition blocks page interaction

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 ?

[oliviertassinari]

Duplicate of #8919

Move the transition component definition outside of the rendering method.

[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 🎄 .