This is Separate from Material-UI Click Away Listener

ClickAwayListener

Listen for click events that occur somewhere in the document, outside of the element itself.

Usage

npm install --save clickawaylistener

class ClickAway extends React.Component {
  state = {
    open: false,
  };

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

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

  render() {
    const { open } = this.state;

    return (
      <ClickAwayListener onClickAway={this.handleClickAway}>
        <div>
          <button onClick={this.handleClick}>Open menu</button>
          {open ? (
            <div>...</div>
          ) : null}
        </div>
      </ClickAwayListener>
    );
  }
}

Document

Name |Type |Default |Description --------------------|---------|--|-------------------- children *| element||The wrapped element. mouseEvent |enum: 'onClick' |'onMouseDown' |'onMouseUp' |false | 'onMouseUp' |The mouse event to listen to. You can disable the listener by providing false. onClickAway *| func| | Callback fired when a "click away" event is detected. touchEvent| enum: 'onTouchStart' | 'onTouchEnd' | false | 'onTouchEnd' |The touch event to listen to. You can disable the listener by providing false.