Skip to content

Commit 1c44579

Browse files
committed
fix(material/autocomplete): panel top gets cut off in mobile landscape view
Updates previous fix to unsubscribe from the _breakpointObserver on ngOnDestroy. Fixes b/284148377
1 parent 74cf5aa commit 1c44579

File tree

1 file changed

+15
-6
lines changed

1 file changed

+15
-6
lines changed

src/material/autocomplete/autocomplete-trigger.ts

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ export class MatAutocompleteTrigger
140140
private _scrollStrategy: () => ScrollStrategy;
141141
private _keydownSubscription: Subscription | null;
142142
private _outsideClickSubscription: Subscription | null;
143+
private _handsetLandscapeBreakpointSubscription: Subscription | null;
143144

144145
/** Old value of the native input. Used to work around issues with the `input` event on IE. */
145146
private _previousValue: string | number | null;
@@ -283,6 +284,7 @@ export class MatAutocompleteTrigger
283284
window.removeEventListener('blur', this._windowBlurHandler);
284285
}
285286

287+
this._handsetLandscapeBreakpointSubscription?.unsubscribe();
286288
this._viewportSubscription.unsubscribe();
287289
this._componentDestroyed = true;
288290
this._destroyPanel();
@@ -891,12 +893,19 @@ export class MatAutocompleteTrigger
891893
.withFlexibleDimensions(false)
892894
.withPush(false);
893895

894-
// Check breakpoint if being viewed in HandsetLandscape
895-
const isHandsetLandscape = this._breakpointObserver
896-
.observe(Breakpoints.HandsetLandscape)
897-
.subscribe(result => {
898-
return result.matches;
899-
});
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+
return result.matches;
904+
});
905+
}
906+
907+
// Check breakpoint if being viewed in HandsetLandscape via subscription (if not null)
908+
const isHandsetLandscape = this._handsetLandscapeBreakpointSubscription;
900909
// Apply HandsetLandscape settings to prevent overlay cutoff in that breakpoint
901910
// Fixes b/284148377
902911
if (isHandsetLandscape) {

0 commit comments

Comments
 (0)