Close context menu on item click in Chip component (#271)

Backport of #263
dhis2 · Apr 24, 2019 · 187db2f · 187db2f
1 parent 59f2ca5
commit 187db2f
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/packages/app/src/components/Layout/Menu.js b/packages/app/src/components/Layout/Menu.js
@@ -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';
@@ -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>
         );