fix(dropdown): respect closeOnSelect prop on DropdownItem(#2290)

.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);
  }