@sproutsocial/seeds-react-menu 1.8.1 → 1.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.8.1",
+  "version": "1.8.4",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -31,18 +31,18 @@
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.1.2",
-    "@sproutsocial/seeds-react-box": "^1.1.12",
-    "@sproutsocial/seeds-react-button": "^1.3.16",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.20",
-    "@sproutsocial/seeds-react-icon": "^2.2.2",
-    "@sproutsocial/seeds-react-input": "^1.5.2",
-    "@sproutsocial/seeds-react-label": "^1.0.12",
-    "@sproutsocial/seeds-react-popout": "^2.4.22",
-    "@sproutsocial/seeds-react-radio": "^1.3.11",
-    "@sproutsocial/seeds-react-switch": "^1.2.19",
+    "@sproutsocial/seeds-react-box": "^1.1.13",
+    "@sproutsocial/seeds-react-button": "^1.3.18",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.22",
+    "@sproutsocial/seeds-react-icon": "^2.2.4",
+    "@sproutsocial/seeds-react-input": "^1.5.4",
+    "@sproutsocial/seeds-react-label": "^1.0.13",
+    "@sproutsocial/seeds-react-popout": "^2.4.24",
+    "@sproutsocial/seeds-react-radio": "^1.3.12",
+    "@sproutsocial/seeds-react-switch": "^1.2.21",
     "@sproutsocial/seeds-react-system-props": "^3.0.2",
-    "@sproutsocial/seeds-react-theme": "^3.5.0",
-    "@sproutsocial/seeds-react-token-input": "^1.4.23",
+    "@sproutsocial/seeds-react-theme": "^3.5.1",
+    "@sproutsocial/seeds-react-token-input": "^1.4.25",
     "@sproutsocial/seeds-react-utilities": "^4.3.0",
     "@tanstack/react-virtual": "^3.13.12",
     "downshift": "9.0.4",
@@ -51,7 +51,7 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@sproutsocial/seeds-react-tooltip": "^1.1.4",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.6",
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

package/src/MenuItem/MenuItem.tsx

@@ -59,6 +59,7 @@ const MenuItem = ({
         })}
         // use anchor tag if href is provided and button for menuitem
         as={isListbox ? undefined : href ? "a" : "button"}
+        type={href ? undefined : "button"}
         href={href}
         children={children}
         // Keyboard nav uses the arrow keys, not tab.

package/src/MenuItem/__tests__/MenuItem.test.tsx

@@ -321,6 +321,82 @@ const testByType = {
   },
 };
 
+describe("MenuItem type attribute", () => {
+  it('renders with type="button" when used as a menuitem (not listbox)', () => {
+    render(
+      <ActionMenu menuToggleElement={testMenuToggleElement} isOpen>
+        <MenuContent>
+          <MenuItem {...menuItemProps} />
+        </MenuContent>
+      </ActionMenu>
+    );
+
+    const menuItem = screen.getByRole("menuitem");
+    expect(menuItem).toHaveAttribute("type", "button");
+  });
+
+  it('renders with type="button" when used as a listbox option', () => {
+    const testItem = books[0];
+    render(
+      <TestWithMockedMenu context={{ items: books, isListbox: true }}>
+        <MenuItem id={testItem.id}>{testItem.title}</MenuItem>
+      </TestWithMockedMenu>
+    );
+
+    const option = screen.getByRole("option");
+    expect(option).toHaveAttribute("type", "button");
+  });
+
+  it("does not trigger form submission when clicked inside a form", async () => {
+    const handleSubmit = jest.fn((e: React.FormEvent) => e.preventDefault());
+
+    const { user } = render(
+      <form onSubmit={handleSubmit}>
+        <ActionMenu menuToggleElement={testMenuToggleElement} isOpen>
+          <MenuContent>
+            <MenuItem {...menuItemProps} />
+          </MenuContent>
+        </ActionMenu>
+      </form>
+    );
+
+    const menuItem = screen.getByRole("menuitem");
+    await user
+      .setup({ pointerEventsCheck: PointerEventsCheckLevel.Never })
+      .click(menuItem);
+
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+
+  it("does not trigger form submission when listbox option clicked inside a form", async () => {
+    const handleSubmit = jest.fn((e: React.FormEvent) => e.preventDefault());
+
+    const { user } = render(
+      <form onSubmit={handleSubmit}>
+        <MultiSelectMenu
+          menuToggleElement={<MenuToggleButton>Open</MenuToggleButton>}
+          defaultIsOpen
+        >
+          <MenuContent>
+            {books.map((book) => (
+              <MenuItem key={book.id} id={book.id}>
+                {book.title}
+              </MenuItem>
+            ))}
+          </MenuContent>
+        </MultiSelectMenu>
+      </form>
+    );
+
+    const firstOption = screen.getByRole("option", { name: books[0].title });
+    await user
+      .setup({ pointerEventsCheck: PointerEventsCheckLevel.Never })
+      .click(firstOption);
+
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+});
+
 describe("MenuItem when isListbox", () => {
   describe("User Behavior", () => {
     describe.each([

package/src/MenuRoot/__tests__/MenuRoot.test.tsx

@@ -22,9 +22,17 @@ import {
 import { menuPlacementOrigin } from "../MenuRoot";
 import { testDefaultContext } from "../../menuTestingUtils";
 
-jest.mock("@sproutsocial/seeds-react-portal", () => ({ children }) => (
-  <div>{children}</div>
-));
+jest.mock("@sproutsocial/seeds-react-portal", () => {
+  const Portal = ({ children }) => <div>{children}</div>;
+  Portal.DisablePortalToBodyContext = jest
+    .requireActual("react")
+    .createContext(false);
+  return {
+    __esModule: true,
+    default: Portal,
+    DisablePortalToBodyContext: Portal.DisablePortalToBodyContext,
+  };
+});
 
 const TestComponent = () => {
   const { isOpen } = useContext(MenuToggleContext);