fix(material/dialog): mark dialog content as scrollable (angular#28963)

Adds `CdkScrollable` to `MatDialogContent` so that overlays inside of it can reposition on scroll. Fixes angular#28936.
wagnermaciel · Apr 26, 2024 · d0a2d3a · d0a2d3a
1 parent 940f840
commit d0a2d3a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/src/material/dialog/dialog-content-directives.ts b/src/material/dialog/dialog-content-directives.ts
@@ -16,6 +16,7 @@ import {
   Optional,
   SimpleChanges,
 } from '@angular/core';
+import {CdkScrollable} from '@angular/cdk/scrolling';
 
 import {MatDialog} from './dialog';
 import {_closeDialogVia, MatDialogRef} from './dialog-ref';
@@ -159,6 +160,7 @@ export class MatDialogTitle extends MatDialogLayoutSection {
   selector: `[mat-dialog-content], mat-dialog-content, [matDialogContent]`,
   host: {'class': 'mat-mdc-dialog-content mdc-dialog__content'},
   standalone: true,
+  hostDirectives: [CdkScrollable],
 })
 export class MatDialogContent {}
 

diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts
@@ -86,7 +86,11 @@ describe('MDC-based MatDialog', () => {
         {provide: Location, useClass: SpyLocation},
         {
           provide: ScrollDispatcher,
-          useFactory: () => ({scrolled: () => scrolledSubject}),
+          useFactory: () => ({
+            scrolled: () => scrolledSubject,
+            register: () => {},
+            deregister: () => {},
+          }),
         },
       ],
     });

diff --git a/tools/public_api_guard/material/dialog.md b/tools/public_api_guard/material/dialog.md
@@ -19,7 +19,8 @@ import { FocusMonitor } from '@angular/cdk/a11y';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { FocusTrapFactory } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import * as i1 from '@angular/cdk/dialog';
+import * as i1 from '@angular/cdk/scrolling';
+import * as i1_2 from '@angular/cdk/dialog';
 import * as i2 from '@angular/cdk/overlay';
 import * as i3 from '@angular/cdk/portal';
 import * as i4 from '@angular/material/core';
@@ -211,7 +212,7 @@ export class MatDialogContainer extends CdkDialogContainer<MatDialogConfig> impl
 // @public
 export class MatDialogContent {
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogContent, "[mat-dialog-content], mat-dialog-content, [matDialogContent]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogContent, "[mat-dialog-content], mat-dialog-content, [matDialogContent]", never, {}, {}, never, never, true, [{ directive: typeof i1.CdkScrollable; inputs: {}; outputs: {}; }]>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogContent, never>;
 }
@@ -223,7 +224,7 @@ export class MatDialogModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatDialogModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatDialogModule, never, [typeof i1.DialogModule, typeof i2.OverlayModule, typeof i3.PortalModule, typeof i4.MatCommonModule, typeof i5.MatDialogContainer, typeof i6.MatDialogClose, typeof i6.MatDialogTitle, typeof i6.MatDialogActions, typeof i6.MatDialogContent], [typeof i4.MatCommonModule, typeof i5.MatDialogContainer, typeof i6.MatDialogClose, typeof i6.MatDialogTitle, typeof i6.MatDialogActions, typeof i6.MatDialogContent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatDialogModule, never, [typeof i1_2.DialogModule, typeof i2.OverlayModule, typeof i3.PortalModule, typeof i4.MatCommonModule, typeof i5.MatDialogContainer, typeof i6.MatDialogClose, typeof i6.MatDialogTitle, typeof i6.MatDialogActions, typeof i6.MatDialogContent], [typeof i4.MatCommonModule, typeof i5.MatDialogContainer, typeof i6.MatDialogClose, typeof i6.MatDialogTitle, typeof i6.MatDialogActions, typeof i6.MatDialogContent]>;
 }
 
 // @public