Menu not covering other controls

[tranrate]

What MDC-Web Version are you using?

0.7.0

What browser(s) is this bug affecting?

Chrome Version 57.0.2987.110 (32-bit)
Firefox 52.0.1 (64-bit)

What OS are you using?

Windows 10

What are the steps to reproduce the bug?

Place a set of MDC Radio buttons immediately below a Menu, so that the Menu will cover them when opened. Open the menu.
Code to cut and paste into Codepen to do this is after the screen shot below.

What is the expected behavior?

The Radio buttons should be covered by the Menu

What is the actual behavior?

The "Radio" buttons show through the Menu.

screen shot 2017-03-23 at 20:37

HTML used

<main>
  <h1>MDC Simple Menu</h1>
  <p>
    Button position:
    <label>
      <input type="radio" name="position" value="top left" checked>
      Top left
    </label>
    <label>
      <input type="radio" name="position" value="top right">
      Top right
    </label>
    <label>
      <input type="radio" name="position" value="bottom left">
      Bottom left
    </label>
    <label>
      <input type="radio" name="position" value="bottom right">
      Bottom right
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="dark">
      Dark mode
    </label>
  </p>
  <div>
    <span>Last Selected item: <em id="last-selected">&lt;none selected&gt;</em></span>
  </div>
  <div class="demo-content">
    <div class="mdc-menu-anchor">
      <button class="toggle">Toggle</button>

      <div class="mdc-simple-menu" style="position: absolute;" tabindex="-1">
        <ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
          <li class="mdc-list-item" role="menuitem" tabindex="0">Back</li>
          <li class="mdc-list-item" role="menuitem" tabindex="0">Forward</li>
          <li class="mdc-list-item" role="menuitem" tabindex="0">Reload</li>
          <li class="mdc-list-divider" role="separator"></li>

          <li class="mdc-list-item" role="menuitem" tabindex="0">Save As...</li>
          <li class="mdc-list-item" role="menuitem" tabindex="0">Print...</li>
          <li class="mdc-list-item" role="menuitem" tabindex="0">Cast...</li>
          <li class="mdc-list-item" role="menuitem" tabindex="0">Translate to English</li>
          <li class="mdc-list-divider" role="separator"></li>

          <li class="mdc-list-item" role="menuitem" tabindex="0">View Page Source</li>
          <li class="mdc-list-item" role="menuitem" tabindex="0">Inspect</li>
        </ul>
      </div>
    </div>
  </div>
       <h1>MDC Radio</h1>
  <section>
    <h2>CSS Only</h2>
    <div class="mdc-form-field">
      <div class="mdc-radio" data-demo-no-js>
        <input class="mdc-radio__native-control" type="radio" id="ex1-radio1" checked name="ex1">
        <div class="mdc-radio__background">
          <div class="mdc-radio__outer-circle"></div>
          <div class="mdc-radio__inner-circle"></div>
        </div>
      </div>
      <label id="ex1-radio1-label" for="ex1-radio1">Radio 1</label>
    </div>
    <div class="mdc-form-field">
      <div class="mdc-radio" data-demo-no-js>
        <input class="mdc-radio__native-control" type="radio" id="ex1-radio2" name="ex1">
        <div class="mdc-radio__background">
          <div class="mdc-radio__outer-circle"></div>
          <div class="mdc-radio__inner-circle"></div>
        </div>
      </div>
      <label id="ex1-radio2-label" for="ex1-radio2">Radio 2</label>
    </div>

and Javascript

  var menuEl = document.querySelector('.mdc-simple-menu');
  var menu = new mdc.menu.MDCSimpleMenu(menuEl);
  var toggle = document.querySelector('.toggle');
  toggle.addEventListener('click', function() {
    menu.open = !menu.open;
  });
  var dark = document.querySelector('input[name="dark"]');
  dark.addEventListener('change', function(evt) {
    if (evt.target.checked) {
      menuEl.classList.add('mdc-simple-menu--theme-dark');
    } else {
      menuEl.classList.remove('mdc-simple-menu--theme-dark');
    }
  });
  var radios = document.querySelectorAll('input[name="position"]');
  for (var i = 0; i < radios.length; i++) {
    radios[i].addEventListener('change', function(evt) {
      if (evt.target.checked) {
        if (evt.target.value) {
          var anchor = document.querySelector('.mdc-menu-anchor');
          anchor.style.removeProperty('top');
          anchor.style.removeProperty('right');
          anchor.style.removeProperty('bottom');
          anchor.style.removeProperty('left');
          var vertical = evt.target.value.split(' ')[0];
          var horizontal = evt.target.value.split(' ')[1];
          anchor.style.setProperty(vertical, '0');
          anchor.style.setProperty(horizontal, '0');
        }
      }
    });
  }
  var lastSelected = document.getElementById('last-selected');
  menuEl.addEventListener('MDCSimpleMenu:selected', function(evt) {
    const detail = evt.detail;
    lastSelected.textContent = '"' + detail.item.textContent.trim() +
      '" at index ' + detail.index;
  });

Any other information you believe would be useful?

This also affects MDC Select as it uses a Menu.
The Radio buttons are not significant in this, other controls also show through.

Needs a z-index in the css :-)

[amsheehan]

Good catch! I think you're right with needing z-index on menus. If you could submit a pull request with this fix that would be more than appreciated.