Skip to content

Commit

Permalink
Close context menu on item click in Chip component (#263)
Browse files Browse the repository at this point in the history
Fixes DHIS2-6611.

**Problem**
Context menu doesn't close after mouse click on "Manage axes" menu item.

Clicking on other menu items ("Move to category", "Move to filter" and "Remove") "closes" menu, but under the hood it just removes chip & menu entirely, therefore the problem was unnoticeable before introducing "Manage axes" menu item.

**Solution**
Close menu programmatically after mouse click on menu item.

**Implementation**
Since we generate menu items in `DefaultAxis` component and pass them as props to `Chip` which renders `Menu` - we don't have control over `Menu` in `DefaultAxis` component.

To solve this without changing current architecture we can use React built-in `cloneElement` function and assign one more `onClick` callback function to menu items which closes the menu.
  • Loading branch information
neeilya authored Apr 24, 2019
1 parent 73de823 commit 1322191
Showing 1 changed file with 14 additions and 2 deletions.
16 changes: 14 additions & 2 deletions packages/app/src/components/Layout/Menu.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import React, { cloneElement, isValidElement } from 'react';
import isFunction from 'lodash-es/isFunction';
import Menu from '@material-ui/core/Menu';
import IconButton from '@material-ui/core/IconButton';
import MoreHorizontalIcon from '../../assets/MoreHorizontalIcon';
Expand Down Expand Up @@ -38,7 +39,18 @@ class ChipMenu extends React.Component {
open={Boolean(this.state.anchorEl)}
onClose={this.handleClose}
>
{this.props.menuItems}
{this.props.menuItems.map(menuItem => {
const onClick = e => {
if (isFunction(menuItem.props.onClick)) {
menuItem.props.onClick(e);
}
this.handleClose(e);
};

return isValidElement(menuItem)
? cloneElement(menuItem, { onClick })
: menuItem;
})}
</Menu>
</React.Fragment>
);
Expand Down

0 comments on commit 1322191

Please sign in to comment.