Open kevinbeal opened 2 weeks ago
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
Dependencies check up
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 thein={}
condition on the inner one turnstrue
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 linesince
el.scrollHeight
is0
when the element isdisplay: none
.For the case with
<FloatingIndicator>
I couldn't think of anything good. I guess you could poll for the element being visible in theupdatePosition()
function inuse-floating-indicator.ts
checking that there is aleft
value and trying again later when there isn't (sinceel.getBoundClientRect()
gives0
values when the element isdisplay:none
. Obviously, not a great solution...Self-service