React-select: Options menu appear outside the viewport for some layouts

[IvanLeonenko]

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.

[hanhansen]

What is the status on this PR?

[IvanLeonenko]

@hshansen7 Although change is pretty straightforward #1268 still needs to be reviewed and merged. I think it could be merged, what do you think @JedWatson? Coverage decreased a bit, but it's not possible to get proper(rendered) size of the container, so I didn't add any tests.

[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

[JedWatson]

Looking at this, and PR #1268, I think the best approach is to use something like the code @aaronincincy has included above to automatically detect the scroll parents and move them accordingly, rather than requiring an ID to scroll. Would be happy to merge a PR implementing that approach (would need an accompanying example, as well)

[luetkemj]

Any status updates on this issue?

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.