feat(bottom-sheet): allow autofocusing to be disabled (#12193)

Author: crisbeto

src/lib/bottom-sheet/bottom-sheet-config.ts

@@ -42,4 +42,7 @@ export class MatBottomSheetConfig<D = any> {
 
   /** Whether the bottom sheet should close when the user goes backwards/forwards in history. */
   closeOnNavigation?: boolean = true;
+
+  /** Whether the bottom sheet should focus the first focusable element on open. */
+  autoFocus?: boolean = true;
 }

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

@@ -144,10 +144,10 @@ export class MatBottomSheetContainer extends BasePortalOutlet implements OnDestr
   }
 
   _onAnimationDone(event: AnimationEvent) {
-    if (event.toState === 'visible') {
-      this._trapFocus();
-    } else if (event.toState === 'hidden') {
+    if (event.toState === 'hidden') {
       this._restoreFocus();
+    } else if (event.toState === 'visible' && this.bottomSheetConfig.autoFocus) {
+      this._trapFocus();
     }
 
     this._animationStateChanged.emit(event);

src/lib/bottom-sheet/bottom-sheet.spec.ts

@@ -509,6 +509,18 @@ describe('MatBottomSheet', () => {
           .toBe('INPUT', 'Expected first tabbable element (input) in the sheet to be focused.');
     }));
 
+    it('should allow disabling focus of the first tabbable element', fakeAsync(() => {
+      bottomSheet.open(PizzaMsg, {
+        viewContainerRef: testViewContainerRef,
+        autoFocus: false
+      });
+
+      viewContainerFixture.detectChanges();
+      flushMicrotasks();
+
+      expect(document.activeElement.tagName).not.toBe('INPUT');
+    }));
+
     it('should re-focus trigger element when bottom sheet closes', fakeAsync(() => {
       const button = document.createElement('button');
       button.id = 'bottom-sheet-trigger';