Skip to content

Commit 1acff7d

Browse files
committed
fix(material/autocomplete): autocomplete panel top cut off in mobile landscape mode
Fixes a bug in the Angular Material Autocomplete component where the autocomplete panel top was being cut off by the screen in mobile landscape mode. Updates previous fix to target adjustments on HandsetLandscape only. Fixes b/284148377
1 parent 97dcaef commit 1acff7d

File tree

1 file changed

+17
-3
lines changed

1 file changed

+17
-3
lines changed

src/material/autocomplete/autocomplete-trigger.ts

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import {
3131
import {DOCUMENT} from '@angular/common';
3232
import {Directionality} from '@angular/cdk/bidi';
3333
import {DOWN_ARROW, ENTER, ESCAPE, TAB, UP_ARROW, hasModifierKey} from '@angular/cdk/keycodes';
34+
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
3435
import {_getEventTarget} from '@angular/cdk/platform';
3536
import {TemplatePortal} from '@angular/cdk/portal';
3637
import {ViewportRuler} from '@angular/cdk/scrolling';
@@ -239,6 +240,8 @@ export class MatAutocompleteTrigger
239240
private _viewContainerRef: ViewContainerRef,
240241
private _zone: NgZone,
241242
private _changeDetectorRef: ChangeDetectorRef,
243+
/** Subscription to viewport orientation changes. */
244+
private _breakpointObserver: BreakpointObserver,
242245
@Inject(MAT_AUTOCOMPLETE_SCROLL_STRATEGY) scrollStrategy: any,
243246
@Optional() private _dir: Directionality | null,
244247
@Optional() @Inject(MAT_FORM_FIELD) @Host() private _formField: MatFormField | null,
@@ -880,14 +883,25 @@ export class MatAutocompleteTrigger
880883
}
881884

882885
private _getOverlayPosition(): PositionStrategy {
886+
// Set default Overlay Position
883887
const strategy = this._overlay
884888
.position()
885889
.flexibleConnectedTo(this._getConnectedElement())
886-
.withFlexibleDimensions(true)
887-
.withGrowAfterOpen(true)
888-
.withViewportMargin(8)
890+
.withFlexibleDimensions(false)
889891
.withPush(false);
890892

893+
// Check breakpoint if being viewed in HandsetLandscape
894+
const isHandsetLandscape = this._breakpointObserver
895+
.observe(Breakpoints.HandsetLandscape)
896+
.subscribe(result => {
897+
return result.matches;
898+
});
899+
// Apply HandsetLandscape settings to prevent overlay cutoff in that breakpoint
900+
// Fixes b/284148377
901+
if (isHandsetLandscape) {
902+
strategy.withFlexibleDimensions(true).withGrowAfterOpen(true).withViewportMargin(8);
903+
}
904+
891905
this._setStrategyPositions(strategy);
892906
this._positionStrategy = strategy;
893907
return strategy;

0 commit comments

Comments
 (0)