CODEWITHSUNDEEP
react-select
Dmitriy Movchan
Dmitriy Movchan

Reputation: 135

Close react-select menu programmatically

I need to implement a 'Close' button in Menu component of react-select. How can I close Menu after clicking on this button? Is there a prop or function that I can use?

Upvotes: 1

Views: 2447

Answers (1)

bas
bas

Reputation: 15722

You can use the menuIsOpen prop and control the value of this prop with a button something like this:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  closeMenu = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <div className="App">
        <Select
          menuIsOpen={this.state.open}
          onMenuOpen={() => this.setState({ open: true })}
          onMenuClose={this.closeMenu}
        />
        <button onClick={this.closeMenu}>close menu</button>
      </div>
    );
  }
}

You will need to apply some styles so the button doesn't get overlapped by the select menu.

Upvotes: 2

Related Questions