fix(menu): fix menu positioning when using display:none items

closes #3444

src/components/menu/menu-interim-element.js

@@ -284,7 +284,12 @@ function MenuProvider($$interimElementProvider) {
 
  if (positionMode.top == 'target' || positionMode.left == 'target' || positionMode.left == 'target-right') {
  // TODO: Allow centering on an arbitrary node, for now center on first menu-item's child
- alignTarget = openMenuNode.firstElementChild.firstElementChild || openMenuNode.firstElementChild;
+ alignTarget = firstVisibleChild();
+ if (!alignTarget) {
+ throw Error('Error positioning menu. No visible children.');
+ }
+
+ alignTarget = alignTarget.firstElementChild || alignTarget;
  alignTarget = alignTarget.querySelector('[md-menu-align-target]') || alignTarget;
  alignTargetRect = alignTarget.getBoundingClientRect();
 
@@ -363,6 +368,18 @@ function MenuProvider($$interimElementProvider) {
  pos.top = Math.max(Math.min(pos.top, bounds.bottom - containerNode.offsetHeight), bounds.top);
  pos.left = Math.max(Math.min(pos.left, bounds.right - containerNode.offsetWidth), bounds.left);
  }
+
+ /**
+ * Gets the first visible child in the openMenuNode
+ * Necessary incase menu nodes are being dynamically hidden
+ */
+ function firstVisibleChild() {
+ for (var i = 0; i < openMenuNode.children.length; ++i) {
+ if (window.getComputedStyle(openMenuNode.children[i]).display != 'none') {
+ return openMenuNode.children[i];
+ }
+ }
+ }
  }
  }
 }