Skip to content

Commit

Permalink
fix(menu-surface): Fix anchorElement initialization (#4462)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kfranqueiro
kfranqueiro committed Feb 28, 2019
1 parent 88d8189 commit 2025c8b
Show file tree
Hide file tree
Showing 6 changed files with 113 additions and 101 deletions.
6 changes: 2 additions & 4 deletions packages/mdc-menu-surface/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export class MDCMenuSurface extends MDCComponent<MDCMenuSurfaceFoundation> {
return new MDCMenuSurface(root);
}

anchorElement: Element | null = null;
anchorElement!: Element | null; // assigned in initialSyncWithDOM()

protected root_!: HTMLElement; // assigned in MDCComponent constructor

Expand All @@ -54,9 +54,7 @@ export class MDCMenuSurface extends MDCComponent<MDCMenuSurfaceFoundation> {

initialSyncWithDOM() {
const parentEl = this.root_.parentElement;
if (parentEl && parentEl.classList.contains(cssClasses.ANCHOR)) {
this.anchorElement = parentEl;
}
this.anchorElement = parentEl && parentEl.classList.contains(cssClasses.ANCHOR) ? parentEl : null;

if (this.root_.classList.contains(cssClasses.FIXED)) {
this.setFixedPosition(true);
Expand Down
2 changes: 1 addition & 1 deletion test/screenshot/spec/mdc-menu/classes/baseline.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
<main class="test-viewport test-viewport--mobile">
<div class="test-layout">
<div class="test-cell test-cell--menu">
<div class="test-menu-button-container">
<div class="mdc-menu-surface--anchor test-menu-button-container">
<button class="mdc-button test-menu-button">Open menu</button>
<div class="mdc-menu mdc-menu-surface mdc-menu-surface--open test-menu--baseline" tabindex="-1" id="demo-menu">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
Expand Down
2 changes: 1 addition & 1 deletion test/screenshot/spec/mdc-menu/classes/bottom-anchored.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
</head>

<body class="test-container">
<div class="test-menu-button-container test-menu-button-container--bottom-right">
<div class="mdc-menu-surface--anchor test-menu-button-container test-menu-button-container--bottom-right">
<button class="mdc-button test-menu-button">Open menu</button>
<div class="mdc-menu mdc-menu-surface mdc-menu-surface--open test-menu--bottom-right" tabindex="-1" id="demo-menu">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
Expand Down
139 changes: 69 additions & 70 deletions test/screenshot/spec/mdc-menu/classes/menu-selection-group.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,77 +46,76 @@
<main class="test-viewport test-viewport--mobile">
<div class="test-layout">
<div class="test-cell test-cell--menu">
<div class="test-menu-button-container">
<div class="mdc-menu-surface--anchor test-menu-button-container">
<button class="mdc-button test-menu-button">Open menu</button>
<div class="mdc-menu mdc-menu-surface mdc-menu-surface--open" tabindex="-1" id="demo-menu" style="left: 0px; top: 36px;">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
<li>
<ul class="mdc-menu__selection-group">
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>
</span>
<span class="mdc-list-item__text">
Single
</span>
</li>
<li class="mdc-list-item mdc-list-item--disabled" role="menuitem">
<span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>
</span>
<span class="mdc-list-item__text">
1.15
</span>
</li>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>
</span>
<span class="mdc-list-item__text">
Double
</span>
</li>
<li class="mdc-list-item mdc-menu-item--selected" role="menuitem">
<span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>
</span>
<span class="mdc-list-item__text">
Custom: 1.2
</span>
</li>
</ul>
</li>
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__text test-font--redact-all">
Add space before paragraph
</span>
</li>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__text test-font--redact-all">
Add space after paragraph
</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__text test-font--redact-all">
Custom spacing...
</span>
</li>
</ul>
</div>
<div class="mdc-menu mdc-menu-surface mdc-menu-surface--open" tabindex="-1" id="demo-menu" style="left: 0px; top: 36px;">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
<li>
<ul class="mdc-menu__selection-group">
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>
</span>
<span class="mdc-list-item__text">
Single
</span>
</li>
<li class="mdc-list-item mdc-list-item--disabled" role="menuitem">
<span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>
</span>
<span class="mdc-list-item__text">
1.15
</span>
</li>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>
</span>
<span class="mdc-list-item__text">
Double
</span>
</li>
<li class="mdc-list-item mdc-menu-item--selected" role="menuitem">
<span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>
</span>
<span class="mdc-list-item__text">
Custom: 1.2
</span>
</li>
</ul>
</li>
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__text test-font--redact-all">
Add space before paragraph
</span>
</li>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__text test-font--redact-all">
Add space after paragraph
</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__text test-font--redact-all">
Custom spacing...
</span>
</li>
</ul>
</div>
</div>
</div>
Expand Down
1 change: 0 additions & 1 deletion test/screenshot/spec/mdc-menu/fixture.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ window.mdc.testFixture.fontsLoaded.then(() => {
const menuEl = document.querySelector('.mdc-menu');
const menu = mdc.menu.MDCMenu.attachTo(menuEl);
menu.setAnchorCorner(mdc.menu.Corner.BOTTOM_LEFT);
menu.setAnchorElement(buttonEl);
menu.open = true;

buttonEl.addEventListener('click', () => {
Expand Down

0 comments on commit 2025c8b

Please sign in to comment.