[Drawer] persistent=true open=false, component visible after adding props/children that increase size

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

Expected Behavior

This issue is similar to #8963, to which I added a comment. If children are added to a drawer where persistent=true, the component will spill onto the page.

The component position should update automatically in order to stay hidden or provide the caller with the information needed to resize the component.

@oliviertassinari said: “The resolution should be about adding an action property to the Slider so people can programmatically update the position.”

Current Behavior

Currently the drawer content spills onto the page when children are added while the drawer is closed.

Steps to Reproduce (for bugs)

See a demo here:

https://codesandbox.io/s/vqvzk2zv2y

Context

I’m using a bottom anchored persistent drawer for a list of file uploads. The drawer content has a max-height, but the exact height isn’t specified. I want the drawer to be the right height to only be as large as needed to cover the list of uploaded files. Currently, as completed uploads are added to the list, if the drawer is closed, the content will spill onto the page until the drawer is opened and then closed again.

Your Environment

Tech	Version
Material-UI	material-ui@1.0.0-beta.31
React	react@16.2.0
browser	Version 64.0.3282.140 (Official Build) (64-bit)

[olee]

Instead of unmounting on exit, why not just set the subtree to display: none or something like that?

[oliviertassinari]

@freb The current behavior is a tradeoff. People can unmount the drawer from the DOM once the animation is finished:

<Drawer
  variant="persistent"
  SlideProps={{
    unmountOnExit: true
  }}

It’s solving your problem: https://codesandbox.io/s/v8592mk02l. However, users will experience a higher time to responsiveness. More work is needed by the browser when a user opens the Drawer.