fix(dropdown): respect closeOnSelect prop on DropdownItem

.changeset/warm-planets-smile.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/menu": patch
+---
+
+fix(dropdown): respect closeOnSelect prop on DropdownItem(#2290)

packages/components/dropdown/__tests__/dropdown.test.tsx

@@ -537,4 +537,40 @@ describe("Dropdown", () => {
 
     spy.mockRestore();
   });
+
+  it("should respect closeOnSelect setting of DropdownItem", async () => {
+    const onOpenChange = jest.fn();
+    const wrapper = render(
+      <Dropdown onOpenChange={onOpenChange}>
+        <DropdownTrigger>
+          <Button data-testid="trigger-test">Trigger</Button>
+        </DropdownTrigger>
+        <DropdownMenu aria-label="Actions">
+          <DropdownItem key="new" closeOnSelect={false}>
+            New file
+          </DropdownItem>
+          <DropdownItem key="copy">Copy link</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>,
+    );
+
+    let triggerButton = wrapper.getByTestId("trigger-test");
+
+    act(() => {
+      triggerButton.click();
+    });
+    expect(onOpenChange).toBeCalledTimes(1);
+
+    let menuItems = wrapper.getAllByRole("menuitem");
+
+    await act(async () => {
+      await userEvent.click(menuItems[0]);
+      expect(onOpenChange).toBeCalledTimes(1);
+    });
+
+    await act(async () => {
+      await userEvent.click(menuItems[1]);
+      expect(onOpenChange).toBeCalledTimes(2);
+    });
+  });
 });

packages/components/dropdown/stories/dropdown.stories.tsx

@@ -154,6 +154,41 @@ const Template = ({color, variant, ...args}: DropdownProps & DropdownMenuProps)
   </Dropdown>
 );
 
+const ItemCloseOnSelectTemplate = ({
+  color,
+  variant,
+  ...args
+}: DropdownProps & DropdownMenuProps) => (
+  <>
+    <Dropdown {...args}>
+      <DropdownTrigger>
+        <Button>Trigger</Button>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Actions" color={color} variant={variant}>
+        <DropdownItem key="new">New file</DropdownItem>
+        <DropdownItem key="copy">Copy link</DropdownItem>
+        <DropdownItem key="edit">Edit file</DropdownItem>
+        <DropdownItem key="delete" className="text-danger" closeOnSelect={false} color="danger">
+          Delete file
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+    <Dropdown {...args}>
+      <DropdownTrigger>
+        <Button>Trigger</Button>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Actions" closeOnSelect={false} color={color} variant={variant}>
+        <DropdownItem key="new">New file</DropdownItem>
+        <DropdownItem key="copy">Copy link</DropdownItem>
+        <DropdownItem key="edit">Edit file</DropdownItem>
+        <DropdownItem key="delete" className="text-danger" color="danger">
+          Delete file
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  </>
+);
+
 const DynamicTemplate = ({color, variant, ...args}: DropdownProps & DropdownMenuProps) => (
   <Dropdown {...args}>
     <DropdownTrigger>
@@ -740,3 +775,11 @@ export const DisableAnimation = {
     disableAnimation: true,
   },
 };
+
+export const ItemCloseOnSelect = {
+  render: ItemCloseOnSelectTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};

packages/hooks/use-aria-menu/src/use-menu-item.ts

@@ -144,7 +144,7 @@ export function useMenuItem<T>(
   let onAction = isTrigger ? () => {} : props.onAction || data.onAction;
   let router = useRouter();
   let performAction = (e: PressEvent) => {
-    if (onAction) {
+    if (onAction && closeOnSelect) {
       // @ts-ignore
       onAction(key);
     }