autoFocus=TRUE incorrectly scrolls the page when it is higher than the viewport

When a page does not fit into a viewport, i.e. there is a scrollbar in the browser tab, using autoFocus on AsyncSelect causes the page to scroll incorrectly. In my case, it scrolls all the way down, which results in the AsyncSelect being hidden from the viewport.

The workaround that worked for me is setting autoFocus={false} and using componentDidMount in the wrapper component:

setTimeout(() => {
            if (this.selectRef.current) {
              this.selectRef.current.focus();
          }
        }, 400);

Here, selectRef is initialized in the following way:

<AsyncSelect
            ref={this.selectRef}
/>

To make it more specific, I have a Twitter Bootstrap 4 based HTML page, with a navbar. The navbar is non-fixed and non-floating, i.e. it scrolls when you scroll the page.

Inside the navbar, floated to the right is a <button>, and a <Popper> element is next to it (React-UI). When the button is clicked, the Popper is shown.

The AsyncSearch is inside a Popper.

Start at AsyncSelect's autoFocus behavior and reproduce the issue in a page taller than the viewport, with the select inside a Popper. Compare focusing during mounting with the delayed ref focus described in the workaround. Done means enabling autoFocus no longer scrolls the page far enough to hide the AsyncSelect.