fix(Menu): Pass onClick through even when rendered as a link

cultureamp · Jul 18, 2024 · 5546c7e · 5546c7e
1 parent 1167f2d
commit 5546c7e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 8 deletions.
diff --git a/.changeset/lazy-crabs-pay.md b/.changeset/lazy-crabs-pay.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Pass onClick through to MenuItem even when it is rendered as a link
diff --git a/packages/components/src/Menu/_docs/MenuContentExample.tsx b/packages/components/src/Menu/_docs/MenuContentExample.tsx
@@ -26,7 +26,10 @@ export const MenuContentExample = ({
         <MenuList heading={<MenuHeading>Buttons</MenuHeading>}>
           <MenuItem
             onClick={(
-              e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+              e: React.MouseEvent<
+                HTMLButtonElement | HTMLAnchorElement,
+                MouseEvent
+              >
             ): void => {
               alert("Hello")
               e.preventDefault()
@@ -36,7 +39,10 @@ export const MenuContentExample = ({
           />
           <MenuItem
             onClick={(
-              e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+              e: React.MouseEvent<
+                HTMLButtonElement | HTMLAnchorElement,
+                MouseEvent
+              >
             ): void => {
               e.preventDefault()
             }}
@@ -45,7 +51,10 @@ export const MenuContentExample = ({
           />
           <MenuItem
             onClick={(
-              e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+              e: React.MouseEvent<
+                HTMLButtonElement | HTMLAnchorElement,
+                MouseEvent
+              >
             ): void => {
               e.preventDefault()
             }}
@@ -55,7 +64,10 @@ export const MenuContentExample = ({
           />
           <MenuItem
             onClick={(
-              e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+              e: React.MouseEvent<
+                HTMLButtonElement | HTMLAnchorElement,
+                MouseEvent
+              >
             ): void => {
               e.preventDefault()
             }}
@@ -65,7 +77,10 @@ export const MenuContentExample = ({
           />
           <MenuItem
             onClick={(
-              e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+              e: React.MouseEvent<
+                HTMLButtonElement | HTMLAnchorElement,
+                MouseEvent
+              >
             ): void => {
               e.preventDefault()
             }}
@@ -78,15 +93,21 @@ export const MenuContentExample = ({
         <MenuList heading={<MenuHeading>Buttons (no icons)</MenuHeading>}>
           <MenuItem
             onClick={(
-              e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+              e: React.MouseEvent<
+                HTMLButtonElement | HTMLAnchorElement,
+                MouseEvent
+              >
             ): void => {
               e.preventDefault()
             }}
             label="Menu button no icons"
           />
           <MenuItem
             onClick={(
-              e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+              e: React.MouseEvent<
+                HTMLButtonElement | HTMLAnchorElement,
+                MouseEvent
+              >
             ): void => {
               e.preventDefault()
             }}

diff --git a/packages/components/src/Menu/subcomponents/MenuItem/MenuItem.tsx b/packages/components/src/Menu/subcomponents/MenuItem/MenuItem.tsx
@@ -7,7 +7,7 @@ export type MenuItemProps = {
   href?: string
   // Only applicable if href is supplied above
   target?: string
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+  onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void
   icon?: JSX.Element
   destructive?: boolean
   disabled?: boolean
@@ -70,6 +70,7 @@ export const MenuItem = ({
         <a
           id={id}
           href={href}
+          onClick={onClick}
           className={className}
           target={target}
           // this tells screenreaders that this link represents the current page