fix(material/autocomplete): autocomplete landscape fix

src/material/autocomplete/autocomplete-trigger.ts

@@ -31,6 +31,7 @@ import {
 import {DOCUMENT} from '@angular/common';
 import {Directionality} from '@angular/cdk/bidi';
 import {DOWN_ARROW, ENTER, ESCAPE, TAB, UP_ARROW, hasModifierKey} from '@angular/cdk/keycodes';
+import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
 import {_getEventTarget} from '@angular/cdk/platform';
 import {TemplatePortal} from '@angular/cdk/portal';
 import {ViewportRuler} from '@angular/cdk/scrolling';
@@ -139,6 +140,7 @@ export class MatAutocompleteTrigger
   private _scrollStrategy: () => ScrollStrategy;
   private _keydownSubscription: Subscription | null;
   private _outsideClickSubscription: Subscription | null;
+  private _handsetLandscapeBreakpointSubscription = Subscription.EMPTY;
 
   /** Old value of the native input. Used to work around issues with the `input` event on IE. */
   private _previousValue: string | number | null;
@@ -282,6 +284,7 @@ export class MatAutocompleteTrigger
       window.removeEventListener('blur', this._windowBlurHandler);
     }
 
+    this._handsetLandscapeBreakpointSubscription.unsubscribe();
     this._viewportSubscription.unsubscribe();
     this._componentDestroyed = true;
     this._destroyPanel();
@@ -771,6 +774,9 @@ export class MatAutocompleteTrigger
     }
   }
 
+  /** Implements BreakpointObserver to be used to detect handset landscape */
+  private _breakpointObserver = inject(BreakpointObserver);
+
   private _attachOverlay(valueOnAttach: string): void {
     if (!this.autocomplete && (typeof ngDevMode === 'undefined' || ngDevMode)) {
       throw getMatAutocompleteMissingPanelError();
@@ -789,6 +795,26 @@ export class MatAutocompleteTrigger
           overlayRef.updateSize({width: this._getPanelWidth()});
         }
       });
+      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) {
+              this._positionStrategy
+                .withFlexibleDimensions(true)
+                .withGrowAfterOpen(true)
+                .withViewportMargin(8);
+            }
+            return;
+          });
+      }
     } else {
       // Update the trigger, panel width and direction, in case anything has changed.
       this._positionStrategy.setOrigin(this._getConnectedElement());

src/material/autocomplete/autocomplete.spec.ts

@@ -2172,7 +2172,7 @@ describe('MDC-based MatAutocomplete', () => {
         let inputReference = fixture.debugElement.query(By.css('.mdc-text-field'))!.nativeElement;
 
         // Push the element down so it has a little bit of space, but not enough to render.
-        inputReference.style.bottom = '75px';
+        inputReference.style.bottom = '100px';
         inputReference.style.position = 'fixed';
 
         dispatchFakeEvent(inputEl, 'focusin');