Skip to content

Commit f86ff2d

Browse files
committed
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
1 parent f30e548 commit f86ff2d

File tree

1 file changed

+22
-23
lines changed

1 file changed

+22
-23
lines changed

src/material/autocomplete/autocomplete-trigger.ts

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,6 @@ export class MatAutocompleteTrigger
139139
private _scrollStrategy: () => ScrollStrategy;
140140
private _keydownSubscription: Subscription | null;
141141
private _outsideClickSubscription: Subscription | null;
142-
private _handsetLandscapeBreakpointSubscription: Subscription | null;
143142

144143
/** Old value of the native input. Used to work around issues with the `input` event on IE. */
145144
private _previousValue: string | number | null;
@@ -162,6 +161,10 @@ export class MatAutocompleteTrigger
162161
/** Subscription to viewport size changes. */
163162
private _viewportSubscription = Subscription.EMPTY;
164163

164+
/** Implements BreakpointObserver to be used to detect handset landscape */
165+
private _breakpointObserver = inject(BreakpointObserver);
166+
private _handsetLandscapeSubscription = Subscription.EMPTY;
167+
165168
/**
166169
* Whether the autocomplete can open the next time it is focused. Used to prevent a focused,
167170
* closed autocomplete from being reopened if the user switches to another browser tab and then
@@ -283,7 +286,7 @@ export class MatAutocompleteTrigger
283286
window.removeEventListener('blur', this._windowBlurHandler);
284287
}
285288

286-
this._handsetLandscapeBreakpointSubscription?.unsubscribe();
289+
this._handsetLandscapeSubscription.unsubscribe();
287290
this._viewportSubscription.unsubscribe();
288291
this._componentDestroyed = true;
289292
this._destroyPanel();
@@ -792,6 +795,23 @@ export class MatAutocompleteTrigger
792795
overlayRef.updateSize({width: this._getPanelWidth()});
793796
}
794797
});
798+
// Subscribe to the breakpoint events stream to detect when screen is in
799+
// handsetLandscape.
800+
this._handsetLandscapeSubscription = this._breakpointObserver
801+
.observe(Breakpoints.HandsetLandscape)
802+
.subscribe(result => {
803+
const isHandsetLandscape = result.matches;
804+
// Check if result.matches Breakpoints.HandsetLandscape. Apply HandsetLandscape
805+
// settings to prevent overlay cutoff in that breakpoint. Fixes b/284148377
806+
if (isHandsetLandscape) {
807+
this._positionStrategy
808+
.withFlexibleDimensions(true)
809+
.withGrowAfterOpen(true)
810+
.withViewportMargin(8);
811+
} else {
812+
this._positionStrategy.withGrowAfterOpen(false);
813+
}
814+
});
795815
} else {
796816
// Update the trigger, panel width and direction, in case anything has changed.
797817
this._positionStrategy.setOrigin(this._getConnectedElement());
@@ -882,9 +902,6 @@ export class MatAutocompleteTrigger
882902
});
883903
}
884904

885-
/** Implements BreakpointObserver to be used to detect handset landscape */
886-
private _breakpointObserver = inject(BreakpointObserver);
887-
888905
private _getOverlayPosition(): PositionStrategy {
889906
// Set default Overlay Position
890907
const strategy = this._overlay
@@ -893,24 +910,6 @@ export class MatAutocompleteTrigger
893910
.withFlexibleDimensions(false)
894911
.withPush(false);
895912

896-
if (!this._handsetLandscapeBreakpointSubscription) {
897-
// Subscribe to the breakpoint events stream to detect when screen is in
898-
// handsetLandscape. Only subscribe if/when this panel is open.
899-
// BreakpointObserver only returns screen size or isMatched/matches boolean.
900-
this._handsetLandscapeBreakpointSubscription = this._breakpointObserver
901-
.observe(Breakpoints.HandsetLandscape)
902-
.subscribe(result => {
903-
// Check breakpoint if being viewed in HandsetLandscape via subscription (if not null)
904-
const isHandsetLandscape = result.matches;
905-
// Apply HandsetLandscape settings to prevent overlay cutoff in that breakpoint
906-
// Fixes b/284148377
907-
if (isHandsetLandscape) {
908-
strategy.withFlexibleDimensions(true).withGrowAfterOpen(true).withViewportMargin(8);
909-
}
910-
return;
911-
});
912-
}
913-
914913
this._setStrategyPositions(strategy);
915914
this._positionStrategy = strategy;
916915
return strategy;

0 commit comments

Comments
 (0)