update menu item (#3166)

Author: bruugey

.changeset/lazy-symbols-press.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/menu': patch
+---
+
+Adds semantically correct `type="button"` to MenuItem components that are rendered as a button. This prevents submitting forms when Menu components are rendered inside of forms.

packages/menu/src/MenuItem/InternalMenuItemContent.tsx

@@ -83,6 +83,13 @@ export const InternalMenuItemContent = React.forwardRef<
           }
         : {};
 
+    const defaultButtonProps =
+      as === 'button'
+        ? {
+            type: 'button',
+          }
+        : {};
+
     return (
       <InputOption
         ref={fwdRef}
@@ -133,6 +140,7 @@ export const InternalMenuItemContent = React.forwardRef<
           },
           className,
         )}
+        {...defaultButtonProps}
         {...defaultAnchorProps}
         {...rest}
       >

packages/menu/src/MenuItem/MenuItem.spec.tsx

@@ -90,6 +90,22 @@ describe('packages/menu/menu-item', () => {
     });
   });
 
+  describe('when rendered inside a form', () => {
+    test('does not invoke a forms submit handler when clicked', () => {
+      const onSubmit = jest.fn();
+
+      const { getByTestId } = render(
+        <form onSubmit={onSubmit}>
+          <MenuItem data-testid="menu-item" />
+        </form>,
+      );
+
+      const menuItem = getByTestId('menu-item');
+      userEvent.click(menuItem);
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+  });
+
   /* eslint-disable jest/no-disabled-tests */
   describe('types behave as expected', () => {
     test.skip('Accepts string as `as` prop', () => {