Skip to content

bug(dialog): afterOpened() does not emit when "reduce-motion" is enabled #32205

@markoberholzer-es

Description

@markoberholzer-es

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

  1. 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)
  2. Open the provided StackBlitz reproduction.

  3. Open DevTools → Console.

  4. Click “Open dialog without animation” or “Open dialog slowly”.

  5. Observe that the console logs:

    dialog is now open!

    after the dialog opens.

  6. Now enable Reduce Motion using the settings from step 1.

  7. Reload the StackBlitz browser window.

  8. Click “Open dialog without animation” or “Open dialog slowly” again.

  9. 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

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/dialog

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions