Skip to content

Commit cd318fb

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 a3a59e0 commit cd318fb

File tree

1 file changed

+16
-3
lines changed

1 file changed

+16
-3
lines changed

src/material/autocomplete/autocomplete-trigger.ts

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,8 @@ export class MatAutocompleteTrigger
239239
private _viewContainerRef: ViewContainerRef,
240240
private _zone: NgZone,
241241
private _changeDetectorRef: ChangeDetectorRef,
242+
/** Subscription to viewport orientation changes. */
243+
private _breakpointObserver: BreakpointObserver,
242244
@Inject(MAT_AUTOCOMPLETE_SCROLL_STRATEGY) scrollStrategy: any,
243245
@Optional() private _dir: Directionality | null,
244246
@Optional() @Inject(MAT_FORM_FIELD) @Host() private _formField: MatFormField | null,
@@ -881,14 +883,25 @@ export class MatAutocompleteTrigger
881883
}
882884

883885
private _getOverlayPosition(): PositionStrategy {
886+
// Set default Overlay Position
884887
const strategy = this._overlay
885888
.position()
886889
.flexibleConnectedTo(this._getConnectedElement())
887-
.withFlexibleDimensions(true)
888-
.withGrowAfterOpen(true)
889-
.withViewportMargin(8)
890+
.withFlexibleDimensions(false)
890891
.withPush(false);
891892

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+
892905
this._setStrategyPositions(strategy);
893906
this._positionStrategy = strategy;
894907
return strategy;

0 commit comments

Comments
 (0)