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, + }, +};