Drawer does not respect the component hierarchy

[BradfordMedeiros]

Awesome job guys. Been using this in beta, and so far I'm quite pleased with the changes in 1.0. Works really well so far.

Noticing the drawer attaches itself outside of the hierarchy it was placed in and decides to attach itself to the top level of the dom. This makes doing things like relative positioning to its containing element impossible (without hacks). This behavior might be convenient at first, but is relatively inconsistent.

This should instead be a child of the element it is placed in, and if I actually want it to be relative to the most outmost container, I would place it there, with explicit positioning via css overrides.

Seems like you can kind of overload this behavior via ModalProps and overriding the container, but seems like that won't work initially since the element seems like it has to already exist to override? So you can get it to work, but then you'll need to do hackey things via refs and rerendering once the div has been mounted to the dom, and that's always kind of tacky.

material-ui/core": "^1.0.0"

[TrySound]

@BradfordMedeiros I think you didn't get the purpose of drawer component. It's modal component which can be called in any place in the tree and will be rendered strongly in one place inside user viewport. If you want different behaviour you probably need a different component.

You can't position any component like this with only css. position: fixed won't work inside element with transform. So the only way is to render at the top of the tree.

Which functionality are you trying to achieve with drawer?

[BradfordMedeiros]

I want to be able to place a drawer inside another div. Basically I have a custom appbar and I don't want it to cover the appbar. Which seems like a pretty basic use case. I don't want to use override fixed positioning for the drawer since the appbar can change height via user customizations and the drawer needs to respond to that

[oliviertassinari]

Noticing the drawer attaches itself outside of the hierarchy it was placed in and decides to attach itself to the top level of the dom.

@BradfordMedeiros This behavior is specific to the variant="temporary". This variant targets the mobile. The variants that target the desktop don't portal. You should be good. Have a look at our demos to get some inspiration.

Next time, please follow our issue template, providing a reproduction example helps, a lot.