React-Select how to keep default behavior of menu open/close plus add to open menu on button click?

Question

I have a react-select component to preform search on an api , and a button to start the search.

i've tried to set menuIsOpen={true} after button click but it ruins the original focus blur behavior the menu is no longer closing on blur. tried to set .focus() on the input it didn't open the menu.

current original behavior menu is opening on focus and closing on blur , i want to keep this plus i want to open the menu after i click the button.

Answer 1

To achieve what you want you will need to use a controlled menuIsOpen props.

I think the easiest way to keep all the native functionality of react-select is to use a combination of the props onInputChange and onFocus like the following code:

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

    this.state = {
      menuIsOpen: false
    };
  }

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

  openMenu = () => {
    this.refs.focus();
    this.setState({ menuIsOpen: true });
  };

  render() {
    return (
      <div className="App">
        <Select
          ref={r => {
            this.refs = r;
          }}
          options={options}
          onFocus={this.openMenu}
          onInputChange={this.onInputChange}
          menuIsOpen={this.state.menuIsOpen}
        />

        <button onClick={this.openMenu}>Open Select</button>
      </div>
    );
  }
}

Here a live example.