Click Away Listener

class ClickAway extends React.Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
    this.handleClickAway = this.handleClickAway.bind(this);

    this.state = {
      open: false,
    };
  }

  handleClick() {
    this.setState((state) => ({
      open: !state.open,
    }));
  }

  handleClickAway() {
    this.setState({
      open: false,
    });
  }

  render() {
    const { classes } = this.props;
    const { open } = this.state;
    const fake = <div style={{ backgroundColor: '#ccc', height: '8px', marginBottom: '8px' }} />;

    return (
      <div style={{ maxWidth: '150px' }}>
        <ClickAwayListener onClickAway={this.handleClickAway}>
          <div>
            <Button onClick={this.handleClick}>Open menu</Button>
            {open ? (
              <Paper padding={2}>
                {fake}
                {fake}
                {fake}
                {fake}
                {fake}
              </Paper>
            ) : null}
          </div>
        </ClickAwayListener>
      </div>
    );
  }
}