Nextjs renders Collapse with fixed height, causing additional components to not show when toggled

[Angusross111]

What package has an issue

@mantine/core

Describe the bug

Works fine without Nextjs: https://codesandbox.io/s/wonderful-sun-xpk6wl?file=/src/App.tsx:809-817

<div class="mantine-1avyp1d" aria-hidden="false" style="box-sizing: border-box;">
  <div style="opacity: 1; transition: opacity 200ms ease 0s;">
    <div class="mantine-Text-root mantine-15ln0cv">Content</div>
    <div class="mantine-Text-root mantine-15ln0cv">Additional Content</div>
    <div class="mantine-Text-root mantine-15ln0cv">Additional Content</div>
  </div>
</div>;

Nextjs renders Collapse with fixed height: https://codesandbox.io/s/pensive-khayyam-3bg6jf?file=/components/Welcome/Welcome.tsx

On first load press Toggle Additional Content button. Additional context should show

<div
  class="mantine-1avyp1d"
  style="box-sizing: border-box; will-change: height; display: block; overflow: hidden; transition: height 200ms ease 0s; height: 24px;"
  aria-hidden="false"
>
  <div style="opacity:1;transition:opacity 200ms ease">
    <div class="mantine-Text-root mantine-15ln0cv">Content</div>
    <div class="mantine-Text-root mantine-15ln0cv">Additional Content</div>
    <div class="mantine-Text-root mantine-15ln0cv">Additional Content</div>
  </div>
</div>;

After toggling the Collapse it removes the fixed height and works as expected. Not sure if a Nextjs issue or Mantine.

In which browser did the problem occur

Chrome

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

No response

Do you know how to fix the issue

No

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

Yes

Possible fix

No response

[daniel-johnsson]

My current workaround is to set the min-height to the height to the actual height using useElementSize()

const { ref, height } = useElementSize();
  return (
    <Collapse style={{ minHeight: show ? height : 0 }} in={show}>
      <Box ref={ref}>{children}</Box>
    </Collapse>
  );

This ruins the transition though :(

[MikevPeeren]

@daniel-johnsson @rtivital tested this on [email protected] with next at 12.1.6 and this is no longer an issue.

[rtivital]

next 12.1.6 has issues with ssr, this testing is not relevant

[ercgrat]

You can fix this in the code sandbox by turning off React strict mode in the next.config.js (don't forget to restart the next server to test this change, easier to do locally). I have no idea why strict mode would be changing the build output but seems like a Next issue.

[rtivital]

React strict mode only issue: not affecting production, disable strict mode to not have the issue in development