Is it possible to open React-Select component as it mounts?

Question

Not just focusing, but to actually open the component and display options. I know this isn't simple on a regular select component (see Is it possible to use JS to open an HTML select to show its option list? ), but perhaps it is still possible with React-Select.

Answer 1

In react-select you can control the opening of the menu with menuIsOpen props. to achieve your goal I would use a combination of menuIsOpen, onInputChange and onFocus like this:

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      menuIsOpen: true
    };
  }

  onInputChange = (options, { action }) => {
    if (action === "menu-close") {
      this.setState({ menuIsOpen: false });
    }
  };

  onFocus = e => {
    this.setState({ menuIsOpen: true });
  };
  render() {
    return (
      <div className="App">
        <Select
          options={options}
          onFocus={this.onFocus}
          onInputChange={this.onInputChange}
          menuIsOpen={this.state.menuIsOpen}
        />
      </div>
    );
  }
}

onInputChange can receive the following events:

"set-value",
"input-change",
"input-blur",
"menu-close"

Depending of what kind of behaviour you're expecting I would update this live example.