diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6bd64ee29f3..656f74fab50 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
## [`master`](https://github.com/elastic/eui/tree/master)
-No public interface changes since `9.6.0`.
+- Changed `EuiNavDrawer` to close on any list item click ([#1770](https://github.com/elastic/eui/pull/1770))
## [`9.6.0`](https://github.com/elastic/eui/tree/v9.6.0)
diff --git a/src/components/list_group/__snapshots__/list_group_item.test.js.snap b/src/components/list_group/__snapshots__/list_group_item.test.js.snap
index 83d3ae2f022..8cdbac774c8 100644
--- a/src/components/list_group/__snapshots__/list_group_item.test.js.snap
+++ b/src/components/list_group/__snapshots__/list_group_item.test.js.snap
@@ -308,19 +308,3 @@ exports[`EuiListGroupItem throws an warning if both iconType and icon are provid
`;
-
-exports[`EuiListGroupItem throws an warning if both onClick and href are provided but still renders 1`] = `
-
-
-
-
-
-`;
diff --git a/src/components/list_group/list_group_item.js b/src/components/list_group/list_group_item.js
index e15ed76617f..09c4c5bbc51 100644
--- a/src/components/list_group/list_group_item.js
+++ b/src/components/list_group/list_group_item.js
@@ -92,15 +92,11 @@ export const EuiListGroupItem = ({
if (href && !isDisabled) {
itemContent = (
-
+
{iconNode}
{labelContent}
);
-
- if (onClick) {
- console.warn('Both `href` and `onClick` were passed to EuiListGroupItem but only one can exist. The `href` was used.');
- }
} else if ((href && isDisabled) || onClick) {
itemContent = (
{
console.warn = oldConsoleError;
});
- test('if both onClick and href are provided but still renders', () => {
- const component = render(
- {}} href="#" />
- );
-
- expect(consoleStub).toBeCalled();
- expect(consoleStub.mock.calls[0][0]).toMatch(
- '`href` and `onClick` were passed'
- );
- expect(component).toMatchSnapshot();
- });
-
test('if both iconType and icon are provided but still renders', () => {
const component = render(
} />
diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js
index 1465bac1b4f..f1b11042b83 100644
--- a/src/components/nav_drawer/nav_drawer.js
+++ b/src/components/nav_drawer/nav_drawer.js
@@ -191,6 +191,7 @@ export class EuiNavDrawer extends Component {
const item = React.cloneElement(child, {
flyoutMenuButtonClick: this.expandFlyout,
showToolTips: this.state.toolTipsEnabled && showToolTips,
+ drawerItemClick: this.closeBoth,
});
return item;
} else {
diff --git a/src/components/nav_drawer/nav_drawer_group.js b/src/components/nav_drawer/nav_drawer_group.js
index e08d91cb0a2..4dc77c59399 100644
--- a/src/components/nav_drawer/nav_drawer_group.js
+++ b/src/components/nav_drawer/nav_drawer_group.js
@@ -5,7 +5,7 @@ import classNames from 'classnames';
import { EuiListGroup } from '../list_group/list_group';
import { toInitials } from '../../services';
-export const EuiNavDrawerGroup = ({ className, listItems, flyoutMenuButtonClick, ...rest }) => {
+export const EuiNavDrawerGroup = ({ className, listItems, flyoutMenuButtonClick, drawerItemClick, ...rest }) => {
const classes = classNames(
'euiNavDrawerGroup',
className
@@ -21,6 +21,9 @@ export const EuiNavDrawerGroup = ({ className, listItems, flyoutMenuButtonClick,
const items = [...flyoutMenu.listItems];
const title = `${flyoutMenu.title}`;
itemProps.onClick = () => flyoutMenuButtonClick(items, title);
+ // If not a flyout, close the nav drawer and flyout on any list item click
+ } else if (drawerItemClick) {
+ itemProps.onClick = () => drawerItemClick();
}
// Make some declarations of props for the side nav implementation
@@ -61,4 +64,9 @@ EuiNavDrawerGroup.propTypes = {
* of the flyout menu button click
*/
flyoutMenuButtonClick: PropTypes.func,
+ /**
+ * For items that don't open flyouts, it is required to pass a function for
+ * handling of the drawer item click to collapse the drawer
+ */
+ drawerItemClick: PropTypes.func,
};