-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
19.2.19
Description
In Angular Material v20, the afterOpened() observable on MatDialogRef no longer emits when the user has “Reduce Motion” (prefers-reduced-motion) enabled in their system preferences.
This behavior worked correctly in v19.2.19 and earlier versions, indicating a regression introduced in v20.
Reproduction
StackBlitz link: https://stackblitz.com/edit/cv87y6vd-gpr8egfh?file=src%2Fexample%2Fdialog-animations-example-dialog.html
Steps to Reproduce
-
Ensure that Reduce Motion is disabled on your system:
- Windows 10: Settings → Ease of Access → Display → Show animations in Windows
- Windows 11: Settings → Accessibility → Visual Effects → Animation Effects
- macOS: System Settings → Accessibility → Display → Reduce Motion (toggle off)
-
Open the provided StackBlitz reproduction.
-
Open DevTools → Console.
-
Click “Open dialog without animation” or “Open dialog slowly”.
-
Observe that the console logs:
dialog is now open!after the dialog opens.
-
Now enable Reduce Motion using the settings from step 1.
-
Reload the StackBlitz browser window.
-
Click “Open dialog without animation” or “Open dialog slowly” again.
-
Observe that no console log appears after the dialog opens —
afterOpened()is never emitted.
Expected Behavior
afterOpened() should emit once the dialog is fully opened, regardless of the user’s motion preference.
Actual Behavior
When Reduce Motion is enabled, the dialog still appears, but afterOpened() never emits.
Environment
- Angular: 20.2.10
- CDK/Material: 20.2.10
- Browser(s): Chrome/FF/Safari
- Operating System (e.g. Windows, macOS, Ubuntu): Windows, macOS