[V2] IE11 bug: Scrollbar arrows scroll menu to the top when using openMenuOnFocus={true}

[afrisone]

Issue:

When using the prop openMenuOnFocus={true}, we cannot use the down arrow under the scroll bar to scroll the menu list down in IE11 (Chrome works fine). I am on react-select version 2.2.0.

My suspicion is that the menu gets refocused after hitting the scrollbar arrows, and with openMenuOnFocus={true}, it's reopening the menu, scrolling to the top.

Repro steps

1. Create a react-select dropdown with enough options to have a dropdown arrow
2. Give that react select component a prop openMenuOnFocus={true}
3. Open the app in IE11 (Chrome works fine)
4. In the dropdown, try scrolling down hitting the down arrow icon under the scroll bar
5. Notice that the react-select dropdown keeps scrolling back up to the top

Codesandbox does not seem to work in IE11 right now, so I am attaching my code and a GIF showing the behavior instead. Hope that's ok!

Code:

import React, { Component } from "react";
import Select from "react-select";
import "./App.css";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" },
  { value: "chicken", label: "Chicken" },
  { value: "candycorn", label: "CandyCorn" },
  { value: "whiskey", label: "Whiskey" },
  { value: "chocolatewhiskey", label: "ChocolateWhiskey" },
  { value: "strawberrywhiskey", label: "StrawberryWhiskey" },
  { value: "vanillawhiskey", label: "VanillaWhiskey" },
  { value: "coke", label: "Coke" },
  { value: "clock", label: "Clock" },
  { value: "snow", label: "Snow" },
  { value: "nachoflavorbeanchips", label: "nachoflavorbeanchips" }
];

class App extends Component {
  state = {
    selectedOption: null
  };

  handleChange = selectedOption => {
    this.setState({ selectedOption });
  };

  render() {
    const { selectedOption } = this.state;

    return (
      <div className="App">
        <Select
          value={selectedOption}
          onChange={this.handleChange}
          options={options}
          openMenuOnFocus={true}
        />
      </div>
    );
  }
}

export default App;

GIF:

[bradspark]

I'm having this issue as well