Skip to content

Commit da53c95

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 8fa6817 commit da53c95

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
@@ -139,6 +139,7 @@ export class MatAutocompleteTrigger
139139
private _scrollStrategy: () => ScrollStrategy;
140140
private _keydownSubscription: Subscription | null;
141141
private _outsideClickSubscription: Subscription | null;
142+
private _handsetLandscapeBreakpointSubscription: Subscription | null;
142143

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

286+
this._handsetLandscapeBreakpointSubscription?.unsubscribe();
285287
this._viewportSubscription.unsubscribe();
286288
this._componentDestroyed = true;
287289
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)