Drawer without overlay still prevents interaction with the DOM outside the drawer

[fvaldes33]

What package has an issue

@mantine/core

Describe the bug

Just upgraded from 4.x to the latest 5.x version.

Drawers with withOverlay: false before allowed you to interact with the DOM behind the drawer. The drawer root had a height and width of 0px.

Now, even with withOverlay: false the drawer root is fixed and inset 0 which prevents clicks from making it to the dom behind.

What version of @mantine/hooks page do you have in package.json?

5.2

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/embed/misty-haze-8jx2p5

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

The withOverlay prop should be passed into the createStyles method and alter the output of the root styles.

[nmay231]

Probably need withinPortal, but if that doesn't work, please provide a minimal code example in a codesandbox.

[fvaldes33]

@nmay231 - Even with withinPortal I still see the same behavior. codesandbox below

https://codesandbox.io/embed/misty-haze-8jx2p5

[nmay231]

@fvaldes33 Now I understand. You can use the styles API to get the previous behaviour back: styles={{ root: { width: 0, height: 0 } }}.

https://codesandbox.io/s/cocky-torvalds-vbffpz?file=/src/App.tsx:710-752

[fvaldes33]

@nmay231 - Totally, that is what I ended up doing but, should this be fixed in the library?

[nmay231]

It probably should. It doesn't make sense for that behavior when withOverlay={false}. @rtivital ?

[rtivital]

Yeah, I think it is a bug, will be fixed in one of next patches, PR is welcome.

[italodeandra]

Fixed on #2351 (Release 5.3.2)