Blueprint: Feature Request: <Drawer ?> option to not render overlay

[domehead100]

Environment

• __Package version(s)__: latest
• __Browser and OS versions__: Chrome, Windows

Feature request

It would be nice to have an option on the Drawer to not render an overlay so that the Drawer does not block access to other visible parts of the UI when it is open.

Kind of the opposiste of https://github.com/mui-org/material-ui/issues/10993 and would behave like the MUI "Persistent Drawer" in that it does not render an overlay and thus allows access to the not-covered-up content on the page.

Examples

https://material-ui.com/demos/drawers/#persistent-drawer

[giladgray]

@domehead100 this exists: <Drawer hasBackdrop={false}>

[adidahiya]

Yeah, I think you can achieve this with hasBackdrop={false} and custom behavior in your onClose handler. Let us know if that doesn't work for your use case.

[jdpaterson]

I have this issue, I don't think hasBackdrop solves it. Here is a sandbox: https://codesandbox.io/s/confident-boyd-8mg7s . I would like to be able to edit inputs while a drawer is open.

[zdzarsky]

Hi! You can easilly cheat it by overriding pointer-events selector in the top-level CSS file:

.bp3-overlay{
  pointer-events: none;
}

.bp3-overlay-content {
  pointer-events: all;
}

It can be dangerous when you use any overlays stuff apart from this one.

[zdzarsky]

All in all @adidahiya , I think you can easilly add this feature by adding two CSS classes dependent on the Overlay child state. If you'd like I can contribute.

[domehead100]

This is a bit old due to the repo having been locked down to committers only a while back.

Problem was that hasBackdrop did not solve it because even when that was false a backdrop was still being rendered and covering all of the other content on the page.

Pointer events didn't solve it either, since it would allow clicking on, for example, inputs beneath the backdrop, but then the user was unable to interact with the inputs via the keyboard.

Our solution was to add a class name and then style the backdrop to just have the same position and dimensions as the drawer, so even though it was there it was totally behind the drawer.

Hope this helps...