Options menu appear outside the viewport for some layouts

Default behaviour for when options menu goes beyond the visible area is scrolling down to show hidden part of options menu. Current version uses window.scrollBy to scroll and show menu.

However, it doesn’t always work. Sometimes you need to scroll particular parent in DOM hierarchy to make it actually scroll. Like in my case - I have sidebar div and a page div inside the flex row parent, in this case window.scrollBy will not work but scrolling page div does the trick.

Here is the Plunker of the problem: https://plnkr.co/edit/8FDDskB6qpoZWaNiaxvR?p=preview

Going to fix it by introducing new property of scrollable parent container id you want to scroll.

[aaronincincy]

I’ve solved this problem temporarily by adding the below code to an onOpen handler, but I would greatly prefer not having to rely on internal implementation to make this work. Is there any plan to move this forward? Can my code be of any use?

onOpen = () => {
  window.requestAnimationFrame(() => {
    if (this.select.props.scrollMenuIntoView && this.select.menuContainer && this.select.menu) {
      const container = getScrollParent(this.select.menuContainer);
      const menuRect = this.select.menu.getBoundingClientRect();
      const containerRect = container.getBoundingClientRect();
      const scrollBottom = containerRect.top + containerRect.height;

      if (menuRect.bottom > scrollBottom) {
        container.scrollTop += menuRect.bottom - scrollBottom;
      }
    }
  })
}

The definition of getScrollParent is something I found on StackOverflow I think:

function getScrollParent(element, includeHidden) {
  var style = getComputedStyle(element);
  var excludeStaticParent = style.position === "absolute";
  var overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;

  if (style.position === "fixed") return document.body;
  for (var parent = element; (parent = parent.parentElement);) {
    style = getComputedStyle(parent);
    if (excludeStaticParent && style.position === "static") {
      continue;
    }
    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
  }

  return document.body;
}

I would be ok passing this value in as a prop or having you auto-determine it, whichever you think is best

[luetkemj]

Any status updates on this issue?