fix(material/sidenav): prevent drawer from getting stuck when toggled rapidly (#33726)

Fixes that the drawer can get stuck in the wrong state if it is toggled rapidly using the `open`/`close` methods.

Fixes #33722.

Author: crisbeto

src/material/sidenav/drawer.ts

@@ -198,6 +198,7 @@ export class MatDrawer implements AfterViewInit, OnDestroy {
   private _renderer = inject(Renderer2);
   private readonly _interactivityChecker = inject(InteractivityChecker);
   private _doc = inject(DOCUMENT);
+  private _isAnimating = false;
   _container? = inject<MatDrawerContainer>(MAT_DRAWER_CONTAINER, {optional: true});
 
   private _focusTrap: FocusTrap | null = null;
@@ -450,9 +451,16 @@ export class MatDrawer implements AfterViewInit, OnDestroy {
       case 'first-tabbable':
         afterNextRender(
           () => {
-            const hasMovedFocus = this._focusTrap!.focusInitialElement();
+            // If we try to capture focus mid-animation, we can end up shifting the page,
+            // if the drawer starts off from the end so prevent scrolling in this case.
+            // This should mostly happen in edge cases where the drawer is toggled rapidly.
+            const focusOptions: FocusOptions | undefined = this._isAnimating
+              ? {preventScroll: true}
+              : undefined;
+
+            const hasMovedFocus = this._focusTrap!.focusInitialElement(focusOptions);
             if (!hasMovedFocus && typeof element.focus === 'function') {
-              element.focus();
+              element.focus(focusOptions);
             }
           },
           {injector: this._injector},
@@ -587,20 +595,22 @@ export class MatDrawer implements AfterViewInit, OnDestroy {
     this._getContent()?._drawerToggled(this);
 
     if (this._container?._transitionsEnabled) {
-      // Note: it's important to set this as early as possible,
-      // otherwise the animation can look glitchy in some cases.
-      this._setIsAnimating(true);
-
-      // Previously we dispatched this in a `transitionrun` event, but it might not fire
-      // if the element is hidden (see #32992). Since this event is load-bearing for the
-      // margin calculations, we need it to fire consistently.
-      setTimeout(() => this._animationStarted.next());
+      if (this._isAnimating) {
+        this._setIsAnimating(false);
+        this._simulateAnimation();
+      } else {
+        // Note: it's important to set this as early as possible,
+        // otherwise the animation can look glitchy in some cases.
+        this._setIsAnimating(true);
+
+        // Previously we dispatched this in a `transitionrun` event, but it might not fire
+        // if the element is hidden (see #32992). Since this event is load-bearing for the
+        // margin calculations, we need it to fire consistently.
+        setTimeout(() => this._animationStarted.next());
+      }
     } else {
       // Simulate the animation events if animations are disabled.
-      setTimeout(() => {
-        this._animationStarted.next();
-        this._animationEnd.next();
-      });
+      this._simulateAnimation();
     }
 
     this._elementRef.nativeElement.classList.toggle('mat-drawer-opened', isOpen);
@@ -625,7 +635,17 @@ export class MatDrawer implements AfterViewInit, OnDestroy {
 
   /** Toggles whether the drawer is currently animating. */
   private _setIsAnimating(isAnimating: boolean) {
-    this._elementRef.nativeElement.classList.toggle('mat-drawer-animating', isAnimating);
+    if (isAnimating !== this._isAnimating) {
+      this._isAnimating = isAnimating;
+      this._elementRef.nativeElement.classList.toggle('mat-drawer-animating', isAnimating);
+    }
+  }
+
+  private _simulateAnimation() {
+    setTimeout(() => {
+      this._animationStarted.next();
+      this._animationEnd.next();
+    });
   }
 
   _getWidth(): number {