mantine
mantine copied to clipboard
Sometimes `Transition` renders child instanly
What package has an issue
@mantine/core
Describe the bug
Sometimes Transition
renders child instanly without actually transitioning, this happens when Transition
status is currently exited
and then its mounted
prop value changes from false
to true
.
Here is the code to reproduce the problem: https://codesandbox.io/p/devbox/mantine-transition-test-next-4dfvdc
Here is the screen recording. I toggle isVisible
boolean value by clicking the first button. isVisible
is used as the value of mounted
Transition
prop. After a few toggles the hidden button appears instantly.
https://github.com/mantinedev/mantine/assets/7773972/6d6ecade-7c68-4bc9-af80-5dee2ef9f059
Simulation of fast toggling:
https://github.com/mantinedev/mantine/assets/7773972/f02d2584-e769-486c-b322-dc8c1db66700
I'm not sure why exactly this happens. I tried experimenting with flushSync
inside the handleStateChange
function here, but without success.
https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/components/Transition/use-transition.ts#L41
What version of @mantine/* packages do you have in package.json? (Note that all @mantine/* packages must have the same version in order to work correctly)
7.1.7
If possible, please include a link to a codesandbox with the reproduced problem
https://codesandbox.io/p/devbox/mantine-transition-test-next-4dfvdc
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
None
Possible fix
No response
Sandbox link is not working
@ghana7989 thanks, I fixed the link.
I think that's the same issue as #3126.
Please have a look at this comment where I've provided an example using a patched version of the library.
Could you please check whether this resolves the issue for you?
Fixed in 7.6.1
@rtivital Still happening for the modals manager example on the Mantine website. Modal opens instantly after several attempts.