Skip to content

Commit 6095dee

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 52d0231 commit 6095dee

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
@@ -140,7 +140,6 @@ export class MatAutocompleteTrigger
140140
private _scrollStrategy: () => ScrollStrategy;
141141
private _keydownSubscription: Subscription | null;
142142
private _outsideClickSubscription: Subscription | null;
143-
private _handsetLandscapeBreakpointSubscription: Subscription | null;
144143

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

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

287-
this._handsetLandscapeBreakpointSubscription?.unsubscribe();
290+
this._handsetLandscapeSubscription.unsubscribe();
288291
this._viewportSubscription.unsubscribe();
289292
this._componentDestroyed = true;
290293
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)