From 664408d3ebaee367410f3eccd4316991b8d4a5b1 Mon Sep 17 00:00:00 2001
From: Alan Greene <github.com@alangreene.net>
Date: Mon, 11 Nov 2024 14:53:41 +0000
Subject: [PATCH] fix(MenuItemSelectable): remove duplicate onChange (#17967)

This is the same issue and fix that was previously addressed for
`MenuItemRadioGroup` in #17736.

Also added a test to cover this case, including checking the value
passed to the `onChange` prop as the redundant `onChange` being
removed here was passing the SyntheticEvent instead of the expected
boolean.

Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>
Co-authored-by: Anna Wen <54281166+annawen1@users.noreply.github.com>
---
 .../react/src/components/Menu/Menu-test.js    | 31 ++++++++++++++++++-
 .../react/src/components/Menu/MenuItem.tsx    |  4 ---
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/Menu/Menu-test.js b/packages/react/src/components/Menu/Menu-test.js
index 83c50452aaba..c1a2d4979fa1 100644
--- a/packages/react/src/components/Menu/Menu-test.js
+++ b/packages/react/src/components/Menu/Menu-test.js
@@ -255,7 +255,7 @@ describe('MenuItem', () => {
     });
   });
 
-  it('should call onChange once', async () => {
+  it('should call MenuItemRadioGroup onChange once', async () => {
     const onChange = jest.fn();
 
     render(
@@ -278,4 +278,33 @@ describe('MenuItem', () => {
     await userEvent.click(screen.getByTitle('Item 1'));
     expect(onChange).toHaveBeenCalledTimes(1);
   });
+
+  it('should call MenuItemSelectable onChange once with correct value', async () => {
+    const onChange = jest.fn();
+
+    const { rerender } = render(
+      <Menu open label="Menu">
+        <MenuItemSelectable
+          label="Item 1"
+          onChange={onChange}
+          selected={false}
+        />
+      </Menu>
+    );
+
+    await userEvent.click(screen.getByTitle('Item 1'));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(true);
+
+    onChange.mockClear();
+    rerender(
+      <Menu open label="Menu">
+        <MenuItemSelectable label="Item 1" onChange={onChange} selected />
+      </Menu>
+    );
+
+    await userEvent.click(screen.getByTitle('Item 1'));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
 });
diff --git a/packages/react/src/components/Menu/MenuItem.tsx b/packages/react/src/components/Menu/MenuItem.tsx
index 3a07dfd6088e..b709a8f6633c 100644
--- a/packages/react/src/components/Menu/MenuItem.tsx
+++ b/packages/react/src/components/Menu/MenuItem.tsx
@@ -377,10 +377,6 @@ export const MenuItemSelectable = forwardRef<
 
   function handleClick(e) {
     setChecked(!checked);
-
-    if (onChange) {
-      onChange(e);
-    }
   }
 
   useEffect(() => {