title: React Select Async places the cursor(caret) at the end of the placeholder when input is focused
body: <p>I am using React Async Select and I found out that by default it places the cursor(caret) at the end of the placeholder when the input is focused. 
  How can I place the cursor at the beginning? I did not find any prop that I can pass to select component to achieve that behavior.  Here's my AsyncSelect: </p>
  
  <pre><code>  &lt;AsyncSelect
              styles={StyledSearchBar}
              name="search-patients"
              placeholder="Search by Last, First"
              noOptionsMessage={this.noOptionsMessage}
              loadingMessage={this.loadingMessage}
              loadOptions={this.promiseOptions}
              components={{Option: this.renderOption}}
              onKeyDown={this.onKeyDown}
              controlShouldRenderValue={false}
            /&gt;
  </code></pre>