Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Menu[onClick] should not be triggered by propagated onClick event #140

Merged
merged 3 commits into from
May 7, 2018
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
fix: Menu[onClick] should not be triggered by propagated onClick event
benjycui committed May 5, 2018
commit 18dc8047586deb15295c0ae5bdb2235f6d27854e
6 changes: 3 additions & 3 deletions examples/antd.js
Original file line number Diff line number Diff line change
@@ -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 = (<SubMenu title={<span>offset sub menu 2</span>} key="4" pop
function onOpenChange(value) {
console.log('onOpenChange', value);
}
const commonMenu = (<Menu onSelect={handleSelect} onOpenChange={onOpenChange}>
const commonMenu = (<Menu onClick={handleClick} onOpenChange={onOpenChange}>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

重现 bug。

<SubMenu title={<span>sub menu</span>} key="1">
<MenuItem key="1-1">0-1</MenuItem>
<MenuItem key="1-2">0-2</MenuItem>
2 changes: 2 additions & 0 deletions src/DOMWrap.jsx
Original file line number Diff line number Diff line change
@@ -22,6 +22,8 @@ export default class DOMWrap extends React.Component {
delete props.tag;
delete props.hiddenClassName;
delete props.visible;
// Otherwise, the propagated click event will trigger another onClick
props.onClick = null;
return <Tag {...props} />;
}
}
14 changes: 6 additions & 8 deletions src/MenuItem.jsx
Original file line number Diff line number Diff line change
@@ -167,14 +167,12 @@ export class MenuItem extends React.Component {
// <li><a role='menuitem'>Link</a></li> 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 = {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

onClick 会被透传下来,所以 disabled 时需要显式设置为空。

onClick: props.disabled ? null : this.onClick,
onMouseLeave: props.disabled ? null : this.onMouseLeave,
onMouseEnter: props.disabled ? null : this.onMouseEnter,
};
const style = {
...props.style,
};
9 changes: 8 additions & 1 deletion src/SubMenu.jsx
Original file line number Diff line number Diff line change
@@ -491,8 +491,15 @@ export class SubMenu extends React.Component {
subMenuCloseDelay,
} = props;
menuAllProps.forEach(key => delete props[key]);
// Set onClick to null, to ignore propagated onClick event
return (
<li {...props} {...mouseEvents} className={className} role="menuitem">
<li
{...props}
{...mouseEvents}
className={className}
role="menuitem"
onClick={null}
>
{isInlineMode && title}
{isInlineMode && children}
{!isInlineMode && (