fix(material/autocomplete): autocomplete panel top cut off in mobile …

…landscape

Fixes Angular Components autocomplete so that when the panel is open in
mobile landscape that it does not cut off at the top and the panel
resizes/adjusts according to the viewport. Updates the previous fix to
avoid subscribing to handsetLandscapeSubscription as a side effect.

Fixes b/284148377

src/material/autocomplete/autocomplete-trigger.ts

@@ -140,7 +140,6 @@ export class MatAutocompleteTrigger
   private _scrollStrategy: () => ScrollStrategy;
   private _keydownSubscription: Subscription | null;
   private _outsideClickSubscription: Subscription | null;
-  private _handsetLandscapeBreakpointSubscription: Subscription | null;
 
   /** Old value of the native input. Used to work around issues with the `input` event on IE. */
   private _previousValue: string | number | null;
@@ -163,6 +162,10 @@ export class MatAutocompleteTrigger
   /** Subscription to viewport size changes. */
   private _viewportSubscription = Subscription.EMPTY;
 
+  /** Implements BreakpointObserver to be used to detect handset landscape */
+  private _breakpointObserver = inject(BreakpointObserver);
+  private _handsetLandscapeSubscription = Subscription.EMPTY;
+
   /**
    * Whether the autocomplete can open the next time it is focused. Used to prevent a focused,
    * closed autocomplete from being reopened if the user switches to another browser tab and then
@@ -284,7 +287,7 @@ export class MatAutocompleteTrigger
       window.removeEventListener('blur', this._windowBlurHandler);
     }
 
-    this._handsetLandscapeBreakpointSubscription?.unsubscribe();
+    this._handsetLandscapeSubscription.unsubscribe();
     this._viewportSubscription.unsubscribe();
     this._componentDestroyed = true;
     this._destroyPanel();
@@ -792,6 +795,23 @@ export class MatAutocompleteTrigger
           overlayRef.updateSize({width: this._getPanelWidth()});
         }
       });
+      // Subscribe to the breakpoint events stream to detect when screen is in
+      // handsetLandscape.
+      this._handsetLandscapeSubscription = this._breakpointObserver
+        .observe(Breakpoints.HandsetLandscape)
+        .subscribe(result => {
+          const isHandsetLandscape = result.matches;
+          // Check if result.matches Breakpoints.HandsetLandscape. Apply HandsetLandscape
+          // settings to prevent overlay cutoff in that breakpoint. Fixes b/284148377
+          if (isHandsetLandscape) {
+            this._positionStrategy
+              .withFlexibleDimensions(true)
+              .withGrowAfterOpen(true)
+              .withViewportMargin(8);
+          } else {
+            this._positionStrategy.withGrowAfterOpen(false);
+          }
+        });
     } else {
       // Update the trigger, panel width and direction, in case anything has changed.
       this._positionStrategy.setOrigin(this._getConnectedElement());
@@ -882,9 +902,6 @@ export class MatAutocompleteTrigger
     });
   }
 
-  /** Implements BreakpointObserver to be used to detect handset landscape */
-  private _breakpointObserver = inject(BreakpointObserver);
-
   private _getOverlayPosition(): PositionStrategy {
     // Set default Overlay Position
     const strategy = this._overlay
@@ -893,24 +910,6 @@ export class MatAutocompleteTrigger
       .withFlexibleDimensions(false)
       .withPush(false);
 
-    if (!this._handsetLandscapeBreakpointSubscription) {
-      // Subscribe to the breakpoint events stream to detect when screen is in
-      // handsetLandscape. Only subscribe if/when this panel is open.
-      // BreakpointObserver only returns screen size or isMatched/matches boolean.
-      this._handsetLandscapeBreakpointSubscription = this._breakpointObserver
-        .observe(Breakpoints.HandsetLandscape)
-        .subscribe(result => {
-          // Check breakpoint if being viewed in HandsetLandscape via subscription (if not null)
-          const isHandsetLandscape = result.matches;
-          // Apply HandsetLandscape settings to prevent overlay cutoff in that breakpoint
-          // Fixes b/284148377
-          if (isHandsetLandscape) {
-            strategy.withFlexibleDimensions(true).withGrowAfterOpen(true).withViewportMargin(8);
-          }
-          return;
-        });
-    }
-
     this._setStrategyPositions(strategy);
     this._positionStrategy = strategy;
     return strategy;