title: Issues using react-select and it's menuIsOpen property
body: <p>I'm working through a complex component that calls for use of an options list. I'm already using react-select throughout my app so it make sense to reuse this in this instance. I'm trying to embed react-select inline with the select list exposed but hide the controller/input/indicators. Basically, I just want the list. I can get this to work and it's all fine and dandy with the mouse, but when I get into focus issues regarding the select options I'm having issues.</p>
  
  <p>Is there a correct way to initialize focus on the menu list/first option? </p>
  
  <p>Here is a basic example of what I'm trying to do... I want to set focus when the component has completed mounting.</p>
  
  <p>On mount, I've tried a bunch of things. Setting focus to refs within the select. Using query selectors to focus on options themselves... I've also had to play with customizing components, but it appears certain components need to still be active for focus states to work correctly. For instance, the value containers. If I return them as null the component doesn't operate correctly regarding focus.</p>
  
  <pre><code>// tried setting focus on the option directly
  const option: any = this.selectRef.menuListRef.querySelector(
    '.va-select__option'
  );
  option.click(); // does work
  option.focus(); // appears to do nothing, but I believe react select manages this all behind the scenes
  
  // tried setting focus on the input or triggering a click
  this.selectRef.inputRef.focus();
  this.selectRef.inputRef.click();
  
  // Attempted using all of these refs and setting focus:
  controlRef
  inputRef
  menuListRef
  </code></pre>
  
  <p>Example component: </p>
  
  <pre><code>interface DropdownProps {
      isLoading?: boolean;
  }
  
  function EmptyComponent(): React.ReactElement&lt;any&gt; {
      return &lt;&gt;&lt;/&gt;;
  }
  
  export class Dropdown extends React.Component&lt;DropdownProps&gt; {
      selectRef: any;
  
      componentDidMount(): void {
          this.selectRef.menuListRef.focus();
      }
  
      setSelectRef = (element: any): void =&gt; {
          if (element) {
              this.selectRef = element.select.select;
          }
      };
  
      render(): React.ReactNode {
          const { isLoading } = this.props;
          const customComponents: SelectComponentsConfig&lt;any&gt; = {
              IndicatorsContainer: EmptyComponent,
              Input: EmptyComponent,
              Placeholder: EmptyComponent
          };
  
          return (
              &lt;div&gt;
                  &lt;Select
                      components={customComponents}
                      isLoading={isLoading}
                      menuIsOpen={true}
                      options={[
                          {
                              label: 'Group 1',
                              value: 'Value 1'
                          },
                          {
                              label: 'Group 2',
                              value: 'Value 2'
                          },
                          {
                              label: 'Group 3',
                              value: 'Value 3'
                          },
                          {
                              label: 'Group 4',
                              value: 'Value 4'
                          }
                      ]}
                      reference={this.setSelectRef}
                  /&gt;
                  {isLoading &amp;&amp; &lt;div&gt;Loading&lt;/div&gt;}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>I can't seem to get focus states to work correctly and feel like I'm hacking this together a bit much.</p>
  
  <p>Has anyone used <code>react-select</code> this way in the past and have advice? Is there something I need to set or trigger to get the focus working correctly on options? I assume react select does a bit behind the scenes when a user triggers the select to expand and those are not being set in this instance.</p>