Animated children of collapsed or hidden sections animate incorrectly #6447
Description
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
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