title: Right click menu triggering the click event of its parent menu-item
body: <p>I am trying to add right-click menu to a menu item. I think I managed it but after clicking an item in right-click menu, menu item's click action is also firing. Any idea? Example: <a href="https://codesandbox.io/s/q8nl4ypq49" rel="nofollow noreferrer">https://codesandbox.io/s/q8nl4ypq49</a></p>
  
  <p>Edit: My code for react component</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import Popup from "./Popup";
  import Table from "antd/lib/table";
  import Dropdown from "antd/lib/dropdown";
  import Menu from "antd/lib/menu";
  import { columns, data } from "./data";
  import "antd/dist/antd.css";
  
  const menu = (
    &lt;Menu&gt;
      &lt;Menu.Item
        onClick={e =&gt; {
          alert("clicked");
        }}
      &gt;
        click
      &lt;/Menu.Item&gt;
      &lt;Menu.Item&gt;Like it&lt;/Menu.Item&gt;
      &lt;Menu.Item&gt;Bookmark&lt;/Menu.Item&gt;
    &lt;/Menu&gt;
  );
  
  class App extends React.Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Menu mode="horizontal"&gt;
            &lt;Menu.Item
              key="1"
              onClick={() =&gt; {
                alert("parent clicked");
              }}
            &gt;
              &lt;Dropdown overlay={menu} trigger={[`contextMenu`]}&gt;
                &lt;span style={{ userSelect: "none" }}&gt; right click &lt;/span&gt;
              &lt;/Dropdown&gt;
            &lt;/Menu.Item&gt;
          &lt;/Menu&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const APP_NODE = document.getElementById(`container`);
  ReactDOM.render(&lt;App /&gt;, APP_NODE);
  </code></pre>