From c02a6d680ade9cd98763a9d23c123ae3c87b3737 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 28 Dec 2020 13:04:36 +0200 Subject: [PATCH] fix(material/menu): adjust overlay size when amount of items changes Currently we lock the menu into a position after it is opened so that it doesn't jump around when the user scrolls, but this means that if the amount of items changes, it might not be the optimal position anymore. These changes add some code to re-calculate the position if the amount of items changes. Fixes #21456. --- .../mdc-menu/menu.spec.ts | 37 ++++++++++++++++--- src/material/menu/menu-trigger.ts | 9 ++++- src/material/menu/menu.spec.ts | 37 ++++++++++++++++--- src/material/menu/menu.ts | 2 +- tools/public_api_guard/material/menu.d.ts | 1 + 5 files changed, 72 insertions(+), 14 deletions(-) diff --git a/src/material-experimental/mdc-menu/menu.spec.ts b/src/material-experimental/mdc-menu/menu.spec.ts index c9bd6844d6b7..e4dc9e6909f8 100644 --- a/src/material-experimental/mdc-menu/menu.spec.ts +++ b/src/material-experimental/mdc-menu/menu.spec.ts @@ -41,7 +41,7 @@ import { MockNgZone, } from '@angular/cdk/testing/private'; import {Subject} from 'rxjs'; -import {ScrollDispatcher} from '@angular/cdk/scrolling'; +import {ScrollDispatcher, ViewportRuler} from '@angular/cdk/scrolling'; import {FocusMonitor} from '@angular/cdk/a11y'; import { MAT_MENU_SCROLL_STRATEGY, @@ -58,6 +58,7 @@ describe('MDC-based MatMenu', () => { let overlayContainer: OverlayContainer; let overlayContainerElement: HTMLElement; let focusMonitor: FocusMonitor; + let viewportRuler: ViewportRuler; function createComponent(component: Type, providers: Provider[] = [], @@ -68,11 +69,13 @@ describe('MDC-based MatMenu', () => { providers }).compileComponents(); - inject([OverlayContainer, FocusMonitor], (oc: OverlayContainer, fm: FocusMonitor) => { - overlayContainer = oc; - overlayContainerElement = oc.getContainerElement(); - focusMonitor = fm; - })(); + inject([OverlayContainer, FocusMonitor, ViewportRuler], + (oc: OverlayContainer, fm: FocusMonitor, vr: ViewportRuler) => { + overlayContainer = oc; + overlayContainerElement = oc.getContainerElement(); + focusMonitor = fm; + viewportRuler = vr; + })(); return TestBed.createComponent(component); } @@ -1059,6 +1062,28 @@ describe('MDC-based MatMenu', () => { expect(document.activeElement).toBe(items[3], 'Expected fourth item to be focused'); })); + it('should keep the panel in the viewport when more items are added while open', () => { + const fixture = createComponent(SimpleMenu, [], [FakeIcon]); + fixture.detectChanges(); + + const triggerEl = fixture.componentInstance.triggerEl.nativeElement; + triggerEl.style.position = 'absolute'; + triggerEl.style.left = '200px'; + triggerEl.style.bottom = '300px'; + triggerEl.click(); + fixture.detectChanges(); + + const panel = overlayContainerElement.querySelector('.mat-mdc-menu-panel')!; + const viewportHeight = viewportRuler.getViewportSize().height; + let panelRect = panel.getBoundingClientRect(); + expect(Math.floor(panelRect.bottom)).toBeLessThan(viewportHeight); + + fixture.componentInstance.extraItems = new Array(50).fill('Hello there'); + fixture.detectChanges(); + panelRect = panel.getBoundingClientRect(); + expect(Math.floor(panelRect.bottom)).toBe(viewportHeight); + }); + describe('lazy rendering', () => { it('should be able to render the menu content lazily', fakeAsync(() => { const fixture = createComponent(SimpleLazyMenu); diff --git a/src/material/menu/menu-trigger.ts b/src/material/menu/menu-trigger.ts index 22e6cc279ea1..da1bb0d22ddd 100644 --- a/src/material/menu/menu-trigger.ts +++ b/src/material/menu/menu-trigger.ts @@ -247,8 +247,9 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy { const overlayRef = this._createOverlay(); const overlayConfig = overlayRef.getConfig(); + const positionStrategy = overlayConfig.positionStrategy as FlexibleConnectedPositionStrategy; - this._setPosition(overlayConfig.positionStrategy as FlexibleConnectedPositionStrategy); + this._setPosition(positionStrategy); overlayConfig.hasBackdrop = this.menu.hasBackdrop == null ? !this.triggersSubmenu() : this.menu.hasBackdrop; overlayRef.attach(this._getPortal()); @@ -262,6 +263,12 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy { if (this.menu instanceof _MatMenuBase) { this.menu._startAnimation(); + this.menu._directDescendantItems.changes.pipe(takeUntil(this.menu.close)).subscribe(() => { + // Re-adjust the position without locking when the amount of items + // changes so that the overlay is allowed to pick a new optimal position. + positionStrategy.withLockedPosition(false).reapplyLastPosition(); + positionStrategy.withLockedPosition(true); + }); } } diff --git a/src/material/menu/menu.spec.ts b/src/material/menu/menu.spec.ts index 62abc42518bf..8d6fa89c07a6 100644 --- a/src/material/menu/menu.spec.ts +++ b/src/material/menu/menu.spec.ts @@ -11,7 +11,7 @@ import { TAB, } from '@angular/cdk/keycodes'; import {Overlay, OverlayContainer} from '@angular/cdk/overlay'; -import {ScrollDispatcher} from '@angular/cdk/scrolling'; +import {ScrollDispatcher, ViewportRuler} from '@angular/cdk/scrolling'; import { createKeyboardEvent, createMouseEvent, @@ -59,6 +59,7 @@ describe('MatMenu', () => { let overlayContainer: OverlayContainer; let overlayContainerElement: HTMLElement; let focusMonitor: FocusMonitor; + let viewportRuler: ViewportRuler; function createComponent(component: Type, providers: Provider[] = [], @@ -69,11 +70,13 @@ describe('MatMenu', () => { providers }).compileComponents(); - inject([OverlayContainer, FocusMonitor], (oc: OverlayContainer, fm: FocusMonitor) => { - overlayContainer = oc; - overlayContainerElement = oc.getContainerElement(); - focusMonitor = fm; - })(); + inject([OverlayContainer, FocusMonitor, ViewportRuler], + (oc: OverlayContainer, fm: FocusMonitor, vr: ViewportRuler) => { + overlayContainer = oc; + overlayContainerElement = oc.getContainerElement(); + focusMonitor = fm; + viewportRuler = vr; + })(); return TestBed.createComponent(component); } @@ -1002,6 +1005,28 @@ describe('MatMenu', () => { expect(document.activeElement).toBe(items[3], 'Expected fourth item to be focused'); })); + it('should keep the panel in the viewport when more items are added while open', () => { + const fixture = createComponent(SimpleMenu, [], [FakeIcon]); + fixture.detectChanges(); + + const triggerEl = fixture.componentInstance.triggerEl.nativeElement; + triggerEl.style.position = 'absolute'; + triggerEl.style.left = '200px'; + triggerEl.style.bottom = '300px'; + triggerEl.click(); + fixture.detectChanges(); + + const panel = overlayContainerElement.querySelector('.mat-menu-panel')!; + const viewportHeight = viewportRuler.getViewportSize().height; + let panelRect = panel.getBoundingClientRect(); + expect(Math.floor(panelRect.bottom)).toBeLessThan(viewportHeight); + + fixture.componentInstance.extraItems = new Array(50).fill('Hello there'); + fixture.detectChanges(); + panelRect = panel.getBoundingClientRect(); + expect(Math.floor(panelRect.bottom)).toBe(viewportHeight); + }); + describe('lazy rendering', () => { it('should be able to render the menu content lazily', fakeAsync(() => { const fixture = createComponent(SimpleLazyMenu); diff --git a/src/material/menu/menu.ts b/src/material/menu/menu.ts index 1a0ded08d9d6..c868ddd3e226 100644 --- a/src/material/menu/menu.ts +++ b/src/material/menu/menu.ts @@ -111,7 +111,7 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel @ContentChildren(MatMenuItem, {descendants: true}) _allItems: QueryList; /** Only the direct descendant menu items. */ - private _directDescendantItems = new QueryList(); + _directDescendantItems = new QueryList(); /** Subscription to tab events on the menu panel */ private _tabSubscription = Subscription.EMPTY; diff --git a/tools/public_api_guard/material/menu.d.ts b/tools/public_api_guard/material/menu.d.ts index 5d94c97a5ea0..04543246aac7 100644 --- a/tools/public_api_guard/material/menu.d.ts +++ b/tools/public_api_guard/material/menu.d.ts @@ -4,6 +4,7 @@ export declare class _MatMenuBase implements AfterContentInit, MatMenuPanel; _isAnimating: boolean; _panelAnimationState: 'void' | 'enter'; ariaDescribedby: string;