Allow subnav items to execute provided onClick handlers

UNRELEASED.md

@@ -6,6 +6,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
+- Enables optional `onClick` property for `subNavigationItem` on `Nav/Item` component to execute, if provided ([#4394](https://github.com/Shopify/polaris-react/pull/4394))
 - Added optional `onClick` key to `secondaryAction` on `Nav/Item` component ([#4374](https://github.com/Shopify/polaris-react/pull/4374))
 - Added `id` prop to `Layout` and `Heading` for hash linking ([#4307](https://github.com/Shopify/polaris-react/pull/4307))
 - Added `external` prop to `Navigation.Item` component ([#4310](https://github.com/Shopify/polaris-react/pull/4310))

src/components/Navigation/components/Item/Item.tsx

@@ -36,7 +36,7 @@ export interface SubNavigationItem extends ItemURLDetails {
   label: string;
   disabled?: boolean;
   new?: boolean;
-  onClick?(event: MouseEvent<HTMLElement>): void;
+  onClick?(): void;
 }
 
 interface SecondaryAction {
@@ -182,6 +182,7 @@ export function Item({
       styles.Item,
       disabled && styles['Item-disabled'],
       keyFocused && styles.keyFocused,
+      selectedOverride && styles['Item-selected'],
     );
 
     return (
@@ -267,13 +268,23 @@ export function Item({
         <Secondary expanded={showExpanded} id={secondaryNavigationId}>
           {subNavigationItems.map((item) => {
             const {label, ...rest} = item;
+            const onClick = () => {
+              if (onNavigationDismiss) {
+                onNavigationDismiss();
+              }
+
+              if (item.onClick && item.onClick !== onNavigationDismiss) {
+                item.onClick();
+              }
+            };
+
             return (
               <Item
                 {...rest}
                 key={label}
                 label={label}
                 matches={item === longestMatch}
-                onClick={onNavigationDismiss}
+                onClick={onClick}
               />
             );
           })}

src/components/Navigation/components/Item/tests/Item.test.tsx

@@ -279,6 +279,73 @@ describe('<Nav.Item />', () => {
         'aria-expanded': true,
       });
     });
+
+    it('invokes the provided onClick handler', () => {
+      const spy = jest.fn();
+      const item = mountWithNavigationProvider(
+        <Item
+          label="some label"
+          url="/admin/orders"
+          subNavigationItems={[
+            {
+              url: '/admin/draft_orders',
+              disabled: false,
+              label: 'draft orders',
+              onClick: spy,
+            },
+          ]}
+        />,
+        {
+          location: '/admin/orders',
+        },
+      );
+
+      item!
+        .find(Secondary)!
+        .find('a')!
+        .trigger('onClick', {
+          preventDefault: jest.fn(),
+          currentTarget: {
+            getAttribute: () => '/admin/draft_orders',
+          },
+        });
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('invokes onNavDismiss even if a custom onClick is provided', () => {
+      const spy = jest.fn();
+      const item = mountWithNavigationProvider(
+        <Item
+          label="some label"
+          url="/admin/orders"
+          subNavigationItems={[
+            {
+              url: '/admin/draft_orders',
+              disabled: false,
+              label: 'draft orders',
+              onClick: noop,
+            },
+          ]}
+        />,
+        {
+          location: '/admin/orders',
+          onNavigationDismiss: spy,
+        },
+      );
+
+      item!
+        .find(Secondary)!
+        .find('a')!
+        .trigger('onClick', {
+          preventDefault: jest.fn(),
+          currentTarget: {
+            getAttribute: () => '/admin/draft_orders',
+          },
+        });
+
+      expect(spy).toHaveBeenCalledTimes(2);
+    });
   });
 
   describe('with exactMatch true', () => {