5.8.4 and beyond lead to our Drawer contents not being displayed

[Nantris]

What package has an issue

@mantine/core

Describe the bug

5.8.0 and 5.8.3 works great, but everything above that we get an empty white drawer.

It works in the docs, but it no longer works for us.

I traced Mantine as the source by manually bisecting versions.

The fix for #3056 appears to be an undocumented breaking change

I'm not sure how the change breaks it though: fd08c2f

This appears to be because it breaks restyling the component with Emotion by defining an exclusive className on the component.

const StyledDrawer = styled(Drawer)`
  contain: strict;
  animation: ${animations.fadeIn} 500ms;
`;

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

5.8.4

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

No response

Do you know how to fix the issue

None

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

None

Possible fix

No response

[rtivital]

Please check if 6.0.0-alpha.2 resolves your issue with Drawer

[Nantris]

Unfortunately the Drawer fails to open with both alpha.2 and alpha.3. No error appears in the console. I'm not sure if maybe this is due to an API change or if it's a bug.

In 5.x.x, apparently, using the Drawer component instead of styled(Drawer) yields the same problems, so it's not an issue with styled.

It appears to be caused by using CSS contain (with any option besides "none") inside of the Drawer. I don't understand how the changes caused that though. Perhaps it was a different commit in 5.8.4

[Nantris]

Apparently this is fixed by applying height: 100% to .mantine-Drawer-body.

[rtivital]

Please provide a sandbox then, I do not understand the issue – Drawer works correctly on mantine.dev website