diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx
index 8872ce1406c..bf0da8a4ca3 100644
--- a/packages/@react-spectrum/s2/src/Menu.tsx
+++ b/packages/@react-spectrum/s2/src/Menu.tsx
@@ -157,6 +157,7 @@ export let menuitem = style({
},
paddingBottom: '--labelPadding',
backgroundColor: { // TODO: revisit color when I have access to dev mode again
+ // @ts-expect-error Expression produces a union type that is too complex to represent
default: {
default: 'transparent',
isFocused: baseColor('gray-100').isFocusVisible
@@ -301,6 +302,7 @@ let keyboard = style({
color: {
default: 'gray-600',
isDisabled: 'disabled',
+ // @ts-expect-error Expression produces a union type that is too complex to represent
forcedColors: {
isDisabled: 'GrayText'
}
diff --git a/packages/@react-spectrum/s2/stories/Menu.stories.tsx b/packages/@react-spectrum/s2/stories/Menu.stories.tsx
index a9a90847ebc..976e749ab89 100644
--- a/packages/@react-spectrum/s2/stories/Menu.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Menu.stories.tsx
@@ -242,6 +242,27 @@ export const DynamicExample: Story = {
}
};
+export const PreventDefaultClosingBehavior: Story = {
+ render: (args) => {
+ return (
+
+
+
+
+ );
+ }
+};
+
export const SelectionGroups = (args) => {
let [group1, setGroup1] = useState(new Set([1]));
let [group2, setGroup2] = useState(new Set());
diff --git a/packages/react-aria-components/src/Menu.tsx b/packages/react-aria-components/src/Menu.tsx
index 4bd7bf96871..23f1ef4836d 100644
--- a/packages/react-aria-components/src/Menu.tsx
+++ b/packages/react-aria-components/src/Menu.tsx
@@ -349,7 +349,12 @@ export interface MenuItemProps extends RenderProps void
+ onAction?: () => void,
+ /**
+ * Whether the menu should close when the menu item is selected.
+ * @default true
+ */
+ closeOnSelect?: boolean
}
const MenuItemContext = createContext>(null);