fix(material/bottom-sheet): page jumping if backdrop-filter is applied (#30840)

The bottom sheet has an animation where it starts off-screen and animates in. At the same time it moves focus into itself. It seems like under certain conditions (e.g. having `backdrop-filter` on the `body`) this causes the entire page the jump in a jarring way due to the focus being moved.

These changes resolve the issue by telling the browser not to scroll the page when moving focus.

Fixes #30774.

Author: crisbeto

goldens/cdk/dialog/index.api.md

@@ -58,7 +58,7 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig> extends B
     // (undocumented)
     protected _document: Document;
     // (undocumented)
-    protected _elementRef: ElementRef<any>;
+    protected _elementRef: ElementRef<HTMLElement>;
     // (undocumented)
     protected _focusTrapFactory: FocusTrapFactory;
     // (undocumented)
@@ -69,7 +69,7 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig> extends B
     _recaptureFocus(): void;
     // (undocumented)
     _removeAriaLabelledBy(id: string): void;
-    protected _trapFocus(): void;
+    protected _trapFocus(options?: FocusOptions): void;
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<CdkDialogContainer<any>, "cdk-dialog-container", never, {}, {}, never, never, true, never>;
     // (undocumented)

goldens/material/bottom-sheet/index.api.md

@@ -88,6 +88,8 @@ export class MatBottomSheetContainer extends CdkDialogContainer implements OnDes
     // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
+    protected _trapFocus(): void;
+    // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<MatBottomSheetContainer, "mat-bottom-sheet-container", never, {}, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetContainer, never>;

src/cdk/dialog/dialog-container.ts

@@ -73,7 +73,7 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
   extends BasePortalOutlet
   implements OnDestroy
 {
-  protected _elementRef = inject(ElementRef);
+  protected _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
   protected _focusTrapFactory = inject(FocusTrapFactory);
   readonly _config: C;
   private _interactivityChecker = inject(InteractivityChecker);
@@ -254,7 +254,7 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
    * Moves the focus inside the focus trap. When autoFocus is not set to 'dialog', if focus
    * cannot be moved then focus will go to the dialog container.
    */
-  protected _trapFocus() {
+  protected _trapFocus(options?: FocusOptions) {
     if (this._isDestroyed) {
       return;
     }
@@ -274,23 +274,23 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
             // if the focus isn't inside the dialog already, because it's possible that the consumer
             // turned off `autoFocus` in order to move focus themselves.
             if (!this._containsFocus()) {
-              element.focus();
+              element.focus(options);
             }
             break;
           case true:
           case 'first-tabbable':
-            const focusedSuccessfully = this._focusTrap?.focusInitialElement();
+            const focusedSuccessfully = this._focusTrap?.focusInitialElement(options);
             // If we weren't able to find a focusable element in the dialog, then focus the dialog
             // container instead.
             if (!focusedSuccessfully) {
-              this._focusDialogContainer();
+              this._focusDialogContainer(options);
             }
             break;
           case 'first-heading':
-            this._focusByCssSelector('h1, h2, h3, h4, h5, h6, [role="heading"]');
+            this._focusByCssSelector('h1, h2, h3, h4, h5, h6, [role="heading"]', options);
             break;
           default:
-            this._focusByCssSelector(this._config.autoFocus!);
+            this._focusByCssSelector(this._config.autoFocus!, options);
             break;
         }
       },
@@ -345,10 +345,10 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
   }
 
   /** Focuses the dialog container. */
-  private _focusDialogContainer() {
+  private _focusDialogContainer(options?: FocusOptions) {
     // Note that there is no focus method when rendering on the server.
     if (this._elementRef.nativeElement.focus) {
-      this._elementRef.nativeElement.focus();
+      this._elementRef.nativeElement.focus(options);
     }
   }
 

src/material/bottom-sheet/bottom-sheet-container.ts

@@ -132,6 +132,15 @@ export class MatBottomSheetContainer extends CdkDialogContainer implements OnDes
     });
   }
 
+  protected override _trapFocus(): void {
+    // The bottom sheet starts off-screen and animates in, and at the same time we trap focus
+    // within it. With some styles this appears to cause the page to jump around. See:
+    // https://github.com/angular/components/issues/30774. Preventing the browser from
+    // scrolling resolves the issue and isn't really necessary since the bottom sheet
+    // normally isn't scrollable.
+    super._trapFocus({preventScroll: true});
+  }
+
   protected _handleAnimationEvent(isStart: boolean, animationName: string) {
     const isEnter = animationName === ENTER_ANIMATION;
     const isExit = animationName === EXIT_ANIMATION;