title: Close popover by click event / Material UI
body: <p>I'm using popover for my React Application. It works fine but I want to add a functionality of closing a popover by clicking one of menu items inside. </p>
  
  <p>I can close a popover by clicking outside of a popover. Is it possible to close a popover by clicking one of menu items in a popover?</p>
  
  <p>Current view</p>
  
  <p><a href="https://i.stack.imgur.com/7i7R1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7i7R1.png" alt="enter image description here"></a></p>
  
  <p>Code </p>
  
  <pre><code>class Home extends React.Component{
  
  constructor(props){
      super(props);
      this.state = {
          open: false
      }
  }
  
   handleTouchTap = (event) =&gt; {
  // This prevents ghost click.
  event.preventDefault();
  
  this.setState({
    open: true,
    anchorEl: event.currentTarget,
   });
  };
  
  handleRequestClose = () =&gt; {
  this.setState({
    open: false,
  });
  };
  
  render(){
  return(
  &lt;div&gt;
  &lt;div id="PaymentPanel"&gt;
  &lt;div className="PaymentTitle"&gt;Spent Last 14 Days&lt;button className="PaymentToggle" onClick={this.handleTouchTap}&gt;▼&lt;/button&gt;&lt;/div&gt;
  
    &lt;Popover
        open={this.state.open}
        anchorEl={this.state.anchorEl}
        anchorOrigin={{horizontal: 'left', vertical: 'top'}}
        targetOrigin={{horizontal: 'right', vertical: 'top'}}
        onRequestClose={this.handleRequestClose}
      &gt;
      &lt;Menu&gt;
         &lt;p className="menuItem" onClick={this.clickHandle}&gt;{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 14 Days"}&lt;/p&gt;
         &lt;p className="menuItem"  onClick={this.clickHandle}&gt;{this.state.priceBar? "Spent Last 30 Days" : "Spent Last 30 Days"}&lt;/p&gt;
      &lt;/Menu&gt;
     &lt;/Popover&gt;
     &lt;/div&gt;
     &lt;/div&gt;
      )
      }
     }
  </code></pre>