title: Opening the menu to the default value in react-select
body: <p>I am using <code>react-select</code> to allow the user to choose their birth year. If the user has already filled it in, it will be preset to some value, e.g. 1950. The input shows the correct value, however when the menu is opened it is scrolled to the top and shows the most recent years (2018, 2017, 2016, etc).</p>
  
  <p>How do I get it to scroll down to 1950 and highlight that item by default?</p>
  
  <p>My code:</p>
  
  <pre><code>class YearPicker extends React.PureComponent {
      options = [
          {label: 2018, value: 2018},
          {label: 2017, value: 2017},
          // ...
          {label: 1950, value: 1950},
          {label: 1949, value: 1949},
          // ...
      ]
  
      render () {
          return (
              &lt;Select
                  options={this.options}
                  value={this.props.value}
              /&gt;
          )
      }
  }
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/32pwzwxom" rel="nofollow noreferrer">CodeSandbox</a>—this should default to 2002. Once you select a value (2002 or otherwise) it works fine, but when the page first loads you have to scroll down within the menu to find the value.</p>
  
  <p>Per <a href="https://react-select.com/" rel="nofollow noreferrer">the docs</a> I have tried <code>value</code> and <code>defaultValue</code> as well as <code>selectedOption</code> but nothing seems to work. I created a very hacky workaround by leveraging <code>onMenuOpen</code> to find the correct DOM element after it's rendered and then scroll to it, however this breaks the functionality of the arrow keys.</p>