react-select focus() doesn't show cursor after change

Stackoverflow question: https://stackoverflow.com/questions/58538908/react-select-focus-doesnt-show-cursor-after-change

I'm trying to use ref and focus() to manually set the focus into the control input field. In most instances it works, but not immediately after selecting an Option from the dropdown.

After selecting an option from the dropdown, the control gets the focus but the cursor doesn't appear. It only appears if you start typing (including hitting the Esc key). On subsequent openings of the menu, the cursor appears along with the focus of the entire control field. Any ideas how to get this working in all situations, including immediately after making a selection?

I've created a sample code here: https://codesandbox.io/s/react-select-focus-uk3ic

This is the code:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Select from "react-select";
import styled from "styled-components";

import { stateOptions } from "./data.js";

class PopoutExample extends Component {
  selectRef = React.createRef();

  state = {
    isOpen: false,
    option: undefined,
  };

  toggleOpen = () => {
    const isOpening = !this.state.isOpen;
    this.setState(
      {
        isOpen: isOpening,
      },
      () => isOpening && setTimeout(() => this.selectRef.focus(), 400),
    );
  };

  onSelectChange = option => {
    this.toggleOpen();
    this.setState({ option });
  };

  render() {
    const { isOpen, option } = this.state;
    return (
      <Dropdown
        target={
          <MainButton onClick={this.toggleOpen}>
            {option ? option.label : "Select a State"}
          </MainButton>
        }
      >
        <Select
          menuIsOpen
          ref={ref => {
            this.selectRef = ref;
          }}
          styles={{
            container: provided => ({
              ...provided,
              display: isOpen ? "block" : "none",
            }),
          }}
          onChange={this.onSelectChange}
          options={stateOptions}
          value={option}
          controlShouldRenderValue={false}
        />
      </Dropdown>
    );
  }
}

const MainButton = styled.button`
  padding: 10px;
  background-color: aqua;
  width: 100%;
`;

const Dropdown = ({ children, target }) => (
  <div>
    {target}
    {children}
  </div>
);

ReactDOM.render(<PopoutExample />, document.getElementById("root"));

Start with the linked CodeSandbox reproduction and the sample component in the issue, focusing on the ref-driven focus after an option is selected and the control is reopened. Trace the react-select focus behavior for this sequence and verify the cursor appears immediately after selection, including when the control is opened again.