[Menu] [Popover] Menu is not anchored correctly if the active item is deep in the scroll view

[mbixby]

Version: next

<Menu /> with scrolling list of items is not positioned correctly if the active item is deep in the scroll view.

https://gfycat.com/ThinAffectionateAlbertosaurus

Quick fix: getContentAnchorOffset() here https://github.com/callemall/material-ui/blob/next/src/internal/Popover.js#L344 should take scrollTop into account:

function getScrollParent(node, until) { // http://stackoverflow.com/questions/35939886/find-first-scrollable-parent
  if (node === null || node === until) {
    return null;
  }

  if (node.scrollHeight > node.clientHeight) {
    return node;
  } else {
    return getScrollParent(node.parentNode);
  }
}
// ...
contentAnchorOffset = contentAnchorEl.offsetTop - scrollParent.scrollTop + (contentAnchorEl.clientHeight / 2) || 0;

Edit:

contentAnchorOffset = contentAnchorEl.offsetTop - (scrollParent ? scrollParent.scrollTop : 0) + (contentAnchorEl.clientHeight / 2) || 0;

[oliviertassinari]

Hey, I haven't found the time to look into this issue, but is that fix worth porting in the next branch?

[farahphillips]

I'm also having this same issue. I tested out the fix above (thanks @mbixby) and it seems to be working. Is it possible to port this fix into v1-alpha/next?

[mbixby]

The fix was tested only on v1-alpha/next. If you're adopting the patch, there's a missing null check for scrollParent (see edit).

[oliviertassinari]

This issue is also related to #7266.

[quiaro]

Looks like there's more to this issue then simply taking into account scrollParent.scrollTop since the active item will not persistently show in the same position within the menu. When the menu is made visible, the active item may end up appearing at the top or the bottom of the menu thereby loosing the alignment with the anchor element.