mantine icon indicating copy to clipboard operation
mantine copied to clipboard

Sometimes `Transition` renders child instanly

Open dokugo opened this issue 1 year ago • 2 comments

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

dokugo avatar Nov 05 '23 04:11 dokugo

Sandbox link is not working

ghana7989 avatar Jan 15 '24 02:01 ghana7989

@ghana7989 thanks, I fixed the link.

dokugo avatar Jan 15 '24 04:01 dokugo

I think that's the same issue as #3126.

cyantree avatar Feb 24 '24 15:02 cyantree

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?

cyantree avatar Feb 24 '24 16:02 cyantree

Fixed in 7.6.1

rtivital avatar Feb 27 '24 07:02 rtivital

Fixed in 7.6.1

It's still happening in the stories on the Mantine website, FYI :)

fauxparse avatar Mar 03 '24 07:03 fauxparse

@rtivital Still happening for the modals manager example on the Mantine website. Modal opens instantly after several attempts.

devnaumov avatar Mar 04 '24 20:03 devnaumov