[Dialog] Extra animation of Dialog container (Modal FocusTrap is not synchronised with animation events)

[proudman]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/wizardly-aj-szlkuw

Steps:

1. Add position: absolute to MuiDialog-root
2. Add Slide Transition Component with direction="left"

Current behavior 😯

Dialog container (body by default) animated together with Dialog Component.

Expected behavior 🤔

Should not animate Dialog container.

Animation works correct with enabled option disableAutoFocus.
Animation works if add Input with enabled autoFocus inside Dialog content.

Context 🔦

Styling Dialog, custom Dialog animation

Your environment 🌎

npx @mui/envinfo

Google Chrome Version 108.0.5359.124 (Official Build) (x86_64)
MacOs Monterey Version 12.6

[proudman]

I was investigate the issue. FocusTrap component inside ModalUnstyled component is not synchronised with animation events, like onEnter, onExited. FocusTrap sets focus before animation ends - this breaks animation.
Animation also breaks when Dialog closes (onExited). FocusTrap returns focus to the parent element while Modal was set overflow: hidden to document.body. It seems FocusTrap should set and return focus only after animation ends.

[proudman]

pls change label to Modal, FocusTrap

[michaldudak]

This issue is not reproducible with the new Dialog from @base_ui/react. If a similar problem still exists, please open a new issue.