diff --git a/examples/antd.js b/examples/antd.js index 7b20e2cb..bba71251 100644 --- a/examples/antd.js +++ b/examples/antd.js @@ -6,9 +6,9 @@ import Menu, { SubMenu, Item as MenuItem, Divider } from 'rc-menu'; import 'rc-menu/assets/index.less'; import animate from 'css-animation'; -function handleSelect(info) { +function handleClick(info) { + console.log(`clicked ${info.key}`); console.log(info); - console.log(`selected ${info.key}`); } const animation = { @@ -77,7 +77,7 @@ const nestSubMenu = (offset sub menu 2} key="4" pop function onOpenChange(value) { console.log('onOpenChange', value); } -const commonMenu = ( +const commonMenu = ( sub menu} key="1"> 0-1 0-2 diff --git a/src/MenuItem.jsx b/src/MenuItem.jsx index 3a19feb7..00555ed2 100644 --- a/src/MenuItem.jsx +++ b/src/MenuItem.jsx @@ -167,14 +167,12 @@ export class MenuItem extends React.Component { //
  • Link
  • would be a good example delete attrs.role; } - let mouseEvent = {}; - if (!props.disabled) { - mouseEvent = { - onClick: this.onClick, - onMouseLeave: this.onMouseLeave, - onMouseEnter: this.onMouseEnter, - }; - } + // In case that onClick/onMouseLeave/onMouseEnter is passed down from owner + const mouseEvent = { + onClick: props.disabled ? null : this.onClick, + onMouseLeave: props.disabled ? null : this.onMouseLeave, + onMouseEnter: props.disabled ? null : this.onMouseEnter, + }; const style = { ...props.style, }; diff --git a/src/SubMenu.jsx b/src/SubMenu.jsx index 1fce204c..1e2dbe9c 100644 --- a/src/SubMenu.jsx +++ b/src/SubMenu.jsx @@ -491,8 +491,16 @@ export class SubMenu extends React.Component { subMenuCloseDelay, } = props; menuAllProps.forEach(key => delete props[key]); + // Set onClick to null, to ignore propagated onClick event + delete props.onClick; + return ( -
  • +
  • {isInlineMode && title} {isInlineMode && children} {!isInlineMode && ( diff --git a/src/SubPopupMenu.js b/src/SubPopupMenu.js index 0fec13ab..2d08f4c4 100644 --- a/src/SubPopupMenu.js +++ b/src/SubPopupMenu.js @@ -328,6 +328,9 @@ export class SubPopupMenu extends React.Component { } const { prefixCls, eventKey, visible } = props; menuAllProps.forEach(key => delete props[key]); + + // Otherwise, the propagated click event will trigger another onClick + delete props.onClick; return ( // ESLint is not smart enough to know that the type of `children` was checked. /* eslint-disable */ diff --git a/tests/MenuItem.spec.js b/tests/MenuItem.spec.js index a66e643c..1fb54e1e 100644 --- a/tests/MenuItem.spec.js +++ b/tests/MenuItem.spec.js @@ -106,10 +106,8 @@ describe('MenuItem', () => { expect(wrapper.render()).toMatchSnapshot(); wrapper.find('MenuItem').at(0).simulate('click'); expect(onClick).toHaveBeenCalledTimes(1); - wrapper.find('SubMenu').at(0).simulate('click'); - expect(onClick).toHaveBeenCalledTimes(2); wrapper.find('MenuItemGroup').at(0).simulate('click'); - expect(onClick).toHaveBeenCalledTimes(3); + expect(onClick).toHaveBeenCalledTimes(2); }); });