Animated children of collapsed or hidden sections animate incorrectly

[kevinbeal]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.10.2

What package has an issue?

@mantine/core

What framework do you use?

Other, I will specify in the bug description

In which browsers you can reproduce the issue?

All

Describe the bug

First off, thanks for the wonderful library!

The issue:
If you have a <Collapse> inside of another <Collapse> and the in={} condition on the inner one turns true while the parent is collapsed, the next time you open the parent <Collapse>, the inner <Collapse> Is still collapsed (sometimes partially) but only visually because the height is 0 (or some other similarly small number).

Similarly, When you have a <SegmentedControl> (probably due to <FloatingIndicator>) whose value changes within a collapsed section of the app, it will show the first item is selected when you open the parent (despite the real selection).

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/mantine-react-template-forked-7kry7g?file=%2Fsrc%2FApp.tsx%3A16%2C38

Possible fix

For the <Collapse> case, you could change the this line

// from:
return el?.current ? el.current.scrollHeight : 'auto';
// to:
return el?.current ? el.current.scrollHeight || 'auto' : 'auto';

since el.scrollHeight is 0 when the element is display: none.

For the case with <FloatingIndicator> I couldn't think of anything good. I guess you could poll for the element being visible in the updatePosition() function in use-floating-indicator.ts checking that there is a left value and trying again later when there isn't (since el.getBoundClientRect() gives 0 values when the element is display:none. Obviously, not a great solution...

Self-service

• I would be willing to implement a fix for this issue

[chris-nolan]

I think we are having the same issue, but with nested NavLinks, which use the Collapse component internally (I believe). Would be good to get a fix, but it does appear to be quite intermittent, so having trouble replicating our specific issue