Transition exitDuration property not working correctly

[andrew-stockdale-paytently]

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?

Vite

In which browsers you can reproduce the issue?

Chrome

Describe the bug

The exit duration property doesn't seem to have any effect. With the following code, the span both mounts and unmounts in 1ms, rather than unmounting over 5s.

<Transition mounted={opened} duration={1} exitDuration={5000}> {(transitionStyles) => <span style={transitionStyles}>Open</span>} </Transition>

Removing the duration property results in both appearing and disappearing over the default 250ms.

Annoyingly, the codesandbox I've attached doesn't have the exact same issue, but after clicking the button a few times you'll see the transition timers end up in a strange state where the animation fades out instantly.

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

https://codesandbox.io/p/sandbox/mantine-react-template-forked-cxlrsn?file=%2Fsrc%2FApp.tsx%3A10%2C48

Possible fix

No response

Self-service

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

[michaelperros]

I was unable to recreate this bug in Storybook, however, I cloned the Vite Mantine template and was able to recreate it there.

I will continue looking into it.

[rtivital]

Might be related to react strict mode

[michaelperros]

The Vite template is not wrapped with StrictMode from what I understand. Additionally, I built it for production and started it with the preview script, and the bug still occurred. Would that rule out being related to strict mode?

I did discover that when it is behaving correctly the transition span successful mounts and unmounts from DOM as shown in the browser console inspector. This is true in Storybook, and also with the Vite Template if you remove exitDuration and only pass duration as a prop to Transition. In both these scenarios it works as expected.

However, if you pass both duration and exitDuration to Transition in the Vite template, the span does not unmount from the DOM at the end of the transition, and this is the scenario where the bug occurs.

I will continue looking into it.

[jared-jewitt]

Hey 👋 I'm on version 7.11.2 (using Vite) and am also experiencing this issue. My current workaround is to conditionally render the content based on the value I use for mounted:

<Transition mounted={mounted}>
  {styles => !mounted ? <></> : <div style={styles}>...</div>}
</Transition>

[rtivital]

Fixed in #7773, will be available in 8.0.1 and 7.17.7 patches

[rtivital]

Fixed in 8.0.1