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

freb posted onGitHub

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)

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

Yes, I was referring to this pattern for the Slide component: https://github.com/mui-org/material-ui/blob/2f99330ce6a38c34da33bd0f1882bb6e8800f84b/src/Tabs/Tabs.js#L368-L376

posted by oliviertassinari about 7 years ago

@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.

posted by oliviertassinari about 7 years ago

@oliviertassinari note that tabbing through the page and focusing on an element inside the drawer will bring the drawer into view (if it was closed to begin with). I'm not sure if that's expected or not, but it's definitely a bit off as it's hard to close it afterwards.

I've tried with x266ry1rvw, not sure if it's the same for this issue's case.

posted by rolandjitsu about 7 years ago