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 <[email protected]>
Co-authored-by: Anna Wen <[email protected]>

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);
+  });
 });

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(() => {