Issue with Fade and Transition when passing timeout.exit as undefined

[tobywilliams]

Steps to reproduce

Steps:

1. Open this link to live example: (https://codesandbox.io/p/devbox/customizedinputs-material-demo-mui-7-forked-96ppx4?workspaceId=ws_UJkQicAXB81GxgEvK1MtbZ)
2. When providing slotProps.transition.timeout = {enter: 1000, exit:undefined} (which is valid according to the types)
3. When the transition unmounts, the transition state never makes it to 'exited' (as shown in the demo)
4. The 'transitioned' component stays on top and prevents interacting with things that were underneath.

Current behavior

3. When the transition unmounts, the transition state never makes it to 'exited' (as shown in the demo)
4. The 'transitioned' component stays on top and prevents interacting with things that were underneath.

Expected behavior

The visibility prop is set on the node correctly and allows interacting with things that were covered.

Context

Some of our users have raised that this same effect is happening with Modals closing, which is causing us major headaches. Whilst I've witnessed it with my own eyes, there's no timeout.exit = undefined setting in our codebase that I can find.

Any insight to what might cause the exact same behaviour, but with modals closing would be extremely valuable to me.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Fade Transition timeout.exit as undefined

[siriwatknp]

Can you check the sandbox url again? It says Devbox not found.

[tobywilliams]

I've set it to public now: https://codesandbox.io/p/devbox/customizedinputs-material-demo-mui-7-forked-96ppx4?workspaceId=ws_UJkQicAXB81GxgEvK1MtbZ

Turns out that the problem still exists with Grow as well as Fade, just a difference in terms of which parts get covered.

And I must remind, some of our users are experiencing this problem in situations where a dialog is closing (and we've not changed anything on the timeout.exit side of things

[ZeeshanTamboli]

@tobywilliams Just to clarify—if your code hasn’t explicitly set timeout.exit, how did you identify that passing undefined to it is the cause of the issue?

From our end, we can’t determine whether this is a bug in our implementation or in your Modal/Dialog itself without confirming where exactly the undefined value is coming from.

That said, based on your reproduction, it’s clear that setting timeout.exit = undefined causes the transition to never reach the 'exited' state. So ideally, undefined shouldn't be passed in this case, even if the types technically allow it.

[tobywilliams]

Thank you,

The Dialog issue is intermittent across our user base. It can't be deterministically caused by property in the code because I'd have found the cause by now. It's never happened for me (on my company Mac) but does happen consistently for some of our users (I'm trying to get hold of a laptop from that department), all the people that it does happen to are on Windows but we've never had a issue raised by a user in my own department that uses Windows machine.

We've had the issue reported by about 5 people out of a user base of about 3000, so very low numbers but as we are requiring them to use the tool to complete their job, we have to take the issue seriously. In the actual the example, it's a RHF Form with React Query and then when the form is submitted, successfully sent to the server and then closed, the form elements stay on the page invisible and blocking interaction with anything else. We've also added in notistack.

All of this to say, I don't really think that I put an undefined somewhere (I have searched the codebase to check), I was hoping that the example with the backdrop would trigger an idea from your side about how an equivalent effect could be caused - e.g. maybe the theme tries to read in a user's preference on animations from the browser? or something to do with a component unmounting out of order that could cause the transition to get a set of undesirable props for a flash as the modal closes?

How I identified the issue was I set timeout:{enter:1000} on a backdrop transition with the exit key missing (as you see in the example, I was coming up with a loading transition) and noticed it was the same problem as dialog closing. I put the exit:undefined in the example to try and make it really explicit demonstration of the issue for you. (I've removed the timeout setting all together in my code for the backdrop, so no challenges there)

Overall

With out a strike of lightning, I'd recommend adjusting the types on the timeout (assuming what I've demonstrated above is not desirable) and maybe examining the transition library to see if the never getting to the exited state is intentional on their part (I've had a dig myself but not been able to come up with any insight).

I may raise an issue on the transition's github to see if they are aware of the transitions not getting to exited and if they see that as intentional.

I shall keep a hawk eye out for another further clues, I've asked my friendly user to spare me some more of his time

T