feat(Menu): allow href and onClick to co-exist on a menu item (#1779)

src/components/Menu/Menu.stories.tsx

@@ -55,8 +55,7 @@ export const Default: StoryObj<MenuProps> = {
           >
             MDN: Menu
           </Menu.Item>
-          {/* eslint-disable-next-line no-alert */}
-          <Menu.Item onClick={() => alert('Item clicked')}>
+          <Menu.Item href="#index" onClick={() => console.log('Item clicked')}>
             Trigger Action
           </Menu.Item>
           <Menu.Item disabled href="https://example.org/" icon="warning">

src/components/Menu/Menu.test.tsx

@@ -13,6 +13,9 @@ const { Default } = composeStories(stories);
 const { Opened, ...staticStories } = stories;
 
 describe('<Menu />', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
   generateSnapshots(staticStories, {
     getElement: async () => {
       const user = userEvent.setup();
@@ -46,6 +49,27 @@ describe('<Menu />', () => {
     expect(menuContainer.getAttribute('aria-activedescendant')).not.toBeNull();
   });
 
+  it('handles onclick events when there is an href present', async () => {
+    // create a spy on the `log` method, and avoid calling it by setting the mock implementation to nothing
+    const consoleSpy = jest.spyOn(console, 'log').mockImplementation();
+    const user = userEvent.setup();
+    render(<Default />);
+    const triggerButton = await screen.findByRole('button');
+    await act(async () => {
+      await user.click(triggerButton);
+    });
+
+    await act(async () => {
+      await user.keyboard('{arrowdown}{arrowdown}{arrowdown}');
+    });
+
+    await act(async () => {
+      await user.keyboard('{enter}');
+    });
+
+    expect(consoleSpy).toHaveBeenCalledTimes(1);
+  });
+
   it('should close menu on keyboard escape key', async () => {
     const user = userEvent.setup();
     render(<Default />);

src/components/Menu/Menu.tsx

@@ -42,7 +42,7 @@ export type MenuItemProps = ExtractProps<typeof HeadlessMenu.Item> & {
    */
   icon?: IconName;
   /**
-   * Configurable action for the menu item action. If both `href` and `onClick` are used, `onClick` takes precedent.
+   * Configurable action for the menu item upon click
    */
   onClick?: MouseEventHandler<HTMLAnchorElement>;
 };
@@ -189,8 +189,6 @@ const MenuItem = ({
   onClick,
   ...other
 }: MenuItemProps) => {
-  // If we have an event handler, avoid navigation by discarding the href
-  const destinationUrl = !onClick ? href : undefined;
   return (
     <HeadlessMenu.Item {...other}>
       {({ active, disabled }) => {
@@ -209,7 +207,7 @@ const MenuItem = ({
         ) : (
           <a
             className={clsx(styles['menu__item'])}
-            href={destinationUrl}
+            href={href}
             onClick={onClick}
           >
             {listItemView}