From 8e21dc27ac1bb66c1e1bf1df3a8347d0ad75d18d Mon Sep 17 00:00:00 2001 From: gtoxlili <664037691@qq.com> Date: Wed, 27 Mar 2024 18:33:24 +0800 Subject: [PATCH 1/6] fix(dropdown): fix dropdown menu unexpected close when closeOnSelect is false (#2290) --- packages/components/menu/src/menu.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/components/menu/src/menu.tsx b/packages/components/menu/src/menu.tsx index 2e7bab14f2..9fdc539d56 100644 --- a/packages/components/menu/src/menu.tsx +++ b/packages/components/menu/src/menu.tsx @@ -1,5 +1,5 @@ import {forwardRef} from "@nextui-org/system"; -import {ForwardedRef, ReactElement, Ref} from "react"; +import {ForwardedRef, Key, ReactElement, Ref} from "react"; import {UseMenuProps, useMenu} from "./use-menu"; import MenuSection from "./menu-section"; @@ -18,7 +18,7 @@ function Menu(props: Props, ref: ForwardedRef(props: Props, ref: ForwardedRef({...props, ref}); + const onAction = (key: Key) => { + if (closeOnSelect) { + onTopAction?.(key); + } + }; + const content = ( {!state.collection.size && !hideEmptyContent && ( From e65e9fa23a335619ebcb4cd9865a47b9bc1fa630 Mon Sep 17 00:00:00 2001 From: Gtio <664037691@qq.com> Date: Thu, 28 Mar 2024 12:48:56 +0800 Subject: [PATCH 2/6] feat(changeset): Updated DropdownMenu to respect closeOnSelect prop on DropdownItem --- .changeset/warm-planets-smile.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/warm-planets-smile.md diff --git a/.changeset/warm-planets-smile.md b/.changeset/warm-planets-smile.md new file mode 100644 index 0000000000..3b33bbf884 --- /dev/null +++ b/.changeset/warm-planets-smile.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/menu": patch +--- + +fix(dropdown): respect closeOnSelect prop on DropdownItem(#2290) From 45f895ba516330344460899cb193d6a91265d455 Mon Sep 17 00:00:00 2001 From: gtoxlili <664037691@qq.com> Date: Fri, 26 Apr 2024 12:42:12 +0800 Subject: [PATCH 3/6] fix(dropdown): add Template --- .../dropdown/stories/dropdown.stories.tsx | 43 +++++++++++++++++++ packages/components/menu/src/menu.tsx | 10 +---- .../hooks/use-aria-menu/src/use-menu-item.ts | 2 +- 3 files changed, 46 insertions(+), 9 deletions(-) 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, + }, +}; diff --git a/packages/components/menu/src/menu.tsx b/packages/components/menu/src/menu.tsx index 9fdc539d56..2e7bab14f2 100644 --- a/packages/components/menu/src/menu.tsx +++ b/packages/components/menu/src/menu.tsx @@ -1,5 +1,5 @@ import {forwardRef} from "@nextui-org/system"; -import {ForwardedRef, Key, ReactElement, Ref} from "react"; +import {ForwardedRef, ReactElement, Ref} from "react"; import {UseMenuProps, useMenu} from "./use-menu"; import MenuSection from "./menu-section"; @@ -18,7 +18,7 @@ function Menu(props: Props, ref: ForwardedRef(props: Props, ref: ForwardedRef({...props, ref}); - const onAction = (key: Key) => { - if (closeOnSelect) { - onTopAction?.(key); - } - }; - const content = ( {!state.collection.size && !hideEmptyContent && ( diff --git a/packages/hooks/use-aria-menu/src/use-menu-item.ts b/packages/hooks/use-aria-menu/src/use-menu-item.ts index 5a2357a500..6dc46367ba 100644 --- a/packages/hooks/use-aria-menu/src/use-menu-item.ts +++ b/packages/hooks/use-aria-menu/src/use-menu-item.ts @@ -144,7 +144,7 @@ export function useMenuItem( let onAction = isTrigger ? () => {} : props.onAction || data.onAction; let router = useRouter(); let performAction = (e: PressEvent) => { - if (onAction) { + if (onAction && closeOnSelect) { // @ts-ignore onAction(key); } From 0bc509a4e3a595dc757d70723b7486d6d178bde8 Mon Sep 17 00:00:00 2001 From: gtoxlili <664037691@qq.com> Date: Fri, 26 Apr 2024 14:12:33 +0800 Subject: [PATCH 4/6] fix(dropdown): add tests --- .../dropdown/__tests__/dropdown.test.tsx | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) 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); + }); + }); }); From 4b39f0bcfd6ca73045238eb51f2cf3c180a0b282 Mon Sep 17 00:00:00 2001 From: gtoxlili <664037691@qq.com> Date: Wed, 8 May 2024 15:06:27 +0800 Subject: [PATCH 5/6] fix(dropdown): fixing logic gaps --- packages/components/dropdown/src/use-dropdown.ts | 12 +++++++++++- packages/hooks/use-aria-menu/src/use-menu-item.ts | 2 +- 2 files changed, 12 insertions(+), 2 deletions(-) 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/hooks/use-aria-menu/src/use-menu-item.ts b/packages/hooks/use-aria-menu/src/use-menu-item.ts index 6dc46367ba..5a2357a500 100644 --- a/packages/hooks/use-aria-menu/src/use-menu-item.ts +++ b/packages/hooks/use-aria-menu/src/use-menu-item.ts @@ -144,7 +144,7 @@ export function useMenuItem( let onAction = isTrigger ? () => {} : props.onAction || data.onAction; let router = useRouter(); let performAction = (e: PressEvent) => { - if (onAction && closeOnSelect) { + if (onAction) { // @ts-ignore onAction(key); } From 0b82163ab5d2ef87be1e2dc23b2c4656651d579e Mon Sep 17 00:00:00 2001 From: WK Wong Date: Thu, 16 May 2024 16:59:29 +0800 Subject: [PATCH 6/6] fix(changeset): incorrect package name --- .changeset/warm-planets-smile.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/warm-planets-smile.md b/.changeset/warm-planets-smile.md index 3b33bbf884..a45a98f667 100644 --- a/.changeset/warm-planets-smile.md +++ b/.changeset/warm-planets-smile.md @@ -1,5 +1,5 @@ --- -"@nextui-org/menu": patch +"@nextui-org/dropdown": patch --- -fix(dropdown): respect closeOnSelect prop on DropdownItem(#2290) +fix(dropdown): respect closeOnSelect prop on DropdownItem (#2290)