So I am working to update Material UI to v5, and I first got an error that onEntering is deprecated and to use transitionprops.
I have a method, let's call it doSomething, that I want to fire when the modal opens.
If I do it like this, I don't have any errors, but doSomething is not called when the modal is opened:
<Modal
TransitionProps = {{ onEntering: (): void => doSomething() }}
>
...
</Modal>
On the other hand, if I do the following, there is an infinite loop of doSomething being called, as well as an error about void is not assignable to type ((node: HTMLElement, isAppearing: boolean) => void) | undefined
<Modal
TransitionProps= {{ onEntering: doSomething() }}
>
...
</Modal>
I have checked the material upgrade documentation, and it has no good examples of what to do on the assigning of the function/method to be called during the transitions.
It just shows that instead of onEntering={doSomething} to use TransitionProps={{ onEnter, onEntering, etc. }} which does not help in regards to how to set onEntering to call the function.
Your issue may stem from the fact that TrasitionProps exists on the Dialog, not the Modal (Dialog inherits from Modal, which in turn inherits from @mui/base's headless Unstyled Modal).
If you're attempting to handle these events on a Modal, you'd pass the handlers to your own transition component (in my example, I used Fade):
import Modal from "@mui/material/Modal";
import Fade from "@mui/material/Fade";
...
<Modal open={open}>
<Fade
onEntered={handleEntered}
onExiting={handleExiting}
onExited={handleExited}
in={open}
>
...
</Fade>
</Modal>
Working CodeSandbox: https://codesandbox.io/s/spring-field-sw9fxq?file=/demo.js
If you're attempting to handle these events on a Dialog, you'd pass the handlers via TransitionProps to the Dialog:
import Dialog from "@mui/material/Dialog";
...
<Dialog
open={open}
TransitionProps={{
onEntered: handleEntered,
onExiting: handleExiting,
onExited: handleExited
}}
>
...
</Dialog>
Working CodeSandbox: https://codesandbox.io/s/jolly-sanne-0t5mks?file=/demo.js
As @totymedli mentioned in the comments, TransitionProps has been deprecated in MUI version 7 in favor of slotProps, so the updated usage would be:
<Dialog
open={open}
slotProps={{
transition: {
onEntered: handleEntered,
onExiting: handleExiting,
onExited: handleExited,
},
}}
>
...
</Dialog>
Working CodeSandbox: https://codesandbox.io/p/sandbox/ecstatic-lake-55362d?file=%2Fsrc%2FDemo.tsx%3A49%2C27