diff --git a/.changeset/warm-planets-smile.md b/.changeset/warm-planets-smile.md
new file mode 100644
index 0000000000..a45a98f667
--- /dev/null
+++ b/.changeset/warm-planets-smile.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/dropdown": patch
+---
+
+fix(dropdown): respect closeOnSelect prop on DropdownItem (#2290)
diff --git a/packages/components/dropdown/__tests__/dropdown.test.tsx b/packages/components/dropdown/__tests__/dropdown.test.tsx
index 3080321f5b..c3629f64cf 100644
--- a/packages/components/dropdown/__tests__/dropdown.test.tsx
+++ b/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(
+
+
+
+
+
+
+ New file
+
+ Copy link
+
+ ,
+ );
+
+ 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);
+ });
+ });
});
diff --git a/packages/components/dropdown/src/use-dropdown.ts b/packages/components/dropdown/src/use-dropdown.ts
index 55fb9071b1..49e0cc2314 100644
--- a/packages/components/dropdown/src/use-dropdown.ts
+++ b/packages/components/dropdown/src/use-dropdown.ts
@@ -141,7 +141,17 @@ export function useDropdown(props: UseDropdownProps) {
menuProps,
closeOnSelect,
...mergeProps(props, {
- onAction: () => onMenuAction(props?.closeOnSelect),
+ onAction: (key: any) => {
+ // @ts-ignore
+ const item = props?.children?.find((item) => item.key === key);
+
+ if (item?.props?.closeOnSelect === false) {
+ onMenuAction(false);
+
+ return;
+ }
+ onMenuAction(props?.closeOnSelect);
+ },
onClose: state.close,
}),
} as MenuProps;
diff --git a/packages/components/dropdown/stories/dropdown.stories.tsx b/packages/components/dropdown/stories/dropdown.stories.tsx
index 7a74ef096a..18573d098a 100644
--- a/packages/components/dropdown/stories/dropdown.stories.tsx
+++ b/packages/components/dropdown/stories/dropdown.stories.tsx
@@ -154,6 +154,41 @@ const Template = ({color, variant, ...args}: DropdownProps & DropdownMenuProps)
);
+const ItemCloseOnSelectTemplate = ({
+ color,
+ variant,
+ ...args
+}: DropdownProps & DropdownMenuProps) => (
+ <>
+
+
+
+
+
+ New file
+ Copy link
+ Edit file
+
+ Delete file
+
+
+
+
+
+
+
+
+ New file
+ Copy link
+ Edit file
+
+ Delete file
+
+
+
+ >
+);
+
const DynamicTemplate = ({color, variant, ...args}: DropdownProps & DropdownMenuProps) => (
@@ -740,3 +775,11 @@ export const DisableAnimation = {
disableAnimation: true,
},
};
+
+export const ItemCloseOnSelect = {
+ render: ItemCloseOnSelectTemplate,
+
+ args: {
+ ...defaultProps,
+ },
+};