React-select: Option menuShouldBlockScroll isn't working correctly

[dragnet]

Component ScrollCaptor always gets as scrollTarget first <div> at component ScrollBlock and tries to calculate variable availableScroll on wheel events with callback handleEventDelta.

// ScrollCaptor
const { scrollTop, scrollHeight, clientHeight } = this.scrollTarget;
...
const availableScroll = scrollHeight - clientHeight - scrollTop; // false

and availableScroll property is always false, because of this <div> doesn't have max-height and overflow-y properties.

// ScrollBlock
render() {
    ...
    return (
     <div> <--- this div Node
        <div
          onClick={this.blurSelectInput}
          css={{ position: 'fixed', left: 0, bottom: 0, right: 0, top: 0 }}
        />
        <NodeResolver innerRef={this.getScrollTarget}>{children}</NodeResolver>
        {touchScrollTarget ? (
          <ScrollLock touchScrollTarget={touchScrollTarget} />
        ) : null}
      </div>
    );
  }

This bug appeared in version 3.0.5.

Version 3.0.4 works better

[fafamx]

I guess if you change captureMenuScroll to false and handle overflow on your side it should be fine.

[dragnet]

I guess if you change captureMenuScroll to false and handle overflow on your side it should be fine.

thanks, Farid
this solution solve this problem

[bladey]

Hello -

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

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue 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!