diff --git a/.changeset/smooth-bears-leave.md b/.changeset/smooth-bears-leave.md new file mode 100644 index 000000000..6e0102325 --- /dev/null +++ b/.changeset/smooth-bears-leave.md @@ -0,0 +1,5 @@ +--- +"@heroui/accordion": patch +--- + +fixed keepContentMounted with disableAnimation (#5157) diff --git a/packages/components/accordion/__tests__/accordion.test.tsx b/packages/components/accordion/__tests__/accordion.test.tsx index ebc1baa36..237e3d704 100644 --- a/packages/components/accordion/__tests__/accordion.test.tsx +++ b/packages/components/accordion/__tests__/accordion.test.tsx @@ -1,6 +1,6 @@ import "@testing-library/jest-dom"; import * as React from "react"; -import {act, render} from "@testing-library/react"; +import {act, render, waitFor} from "@testing-library/react"; import {focus, shouldIgnoreReactWarning, spy} from "@heroui/test-utils"; import userEvent, {UserEvent} from "@testing-library/user-event"; import {Input} from "@heroui/input"; @@ -267,7 +267,7 @@ describe("Accordion", () => { expect(button).toHaveAttribute("aria-expanded", "true"); }); - it("should support keepContentMounted", async () => { + it("should support keepContentMounted={true}", async () => { const wrapper = render( @@ -289,8 +289,98 @@ describe("Accordion", () => { const button2 = item2.querySelector("button") as HTMLElement; await user.click(button2); + + await waitFor(() => { + expect(item1.querySelector("[role='region']")).toBeInTheDocument(); + expect(item2.querySelector("[role='region']")).toBeInTheDocument(); + }); + }); + + it("should support keepContentMounted={false}", async () => { + const wrapper = render( + + + Accordion Item 1 description + + + Accordion Item 2 description + + , + ); + + const item1 = wrapper.getByTestId("item-1"); + const button = item1.querySelector("button") as HTMLElement; + + expect(item1.querySelector("[role='region']")).not.toBeInTheDocument(); + + await user.click(button); + const item2 = wrapper.getByTestId("item-2"); + const button2 = item2.querySelector("button") as HTMLElement; + + await user.click(button2); + + await waitFor(() => { + expect(item1.querySelector("[role='region']")).not.toBeInTheDocument(); + expect(item2.querySelector("[role='region']")).toBeInTheDocument(); + }); + }); + + it("should support keepContentMounted={true} & disableAnimation={true}", async () => { + const wrapper = render( + + + Accordion Item 1 description + + + Accordion Item 2 description + + , + ); + + const item1 = wrapper.getByTestId("item-1"); + const button = item1.querySelector("button") as HTMLElement; + expect(item1.querySelector("[role='region']")).toBeInTheDocument(); - expect(item2.querySelector("[role='region']")).toBeInTheDocument(); + + await user.click(button); + const item2 = wrapper.getByTestId("item-2"); + const button2 = item2.querySelector("button") as HTMLElement; + + await user.click(button2); + + await waitFor(() => { + expect(item1.querySelector("[role='region']")).toBeInTheDocument(); + expect(item2.querySelector("[role='region']")).toBeInTheDocument(); + }); + }); + + it("should support keepContentMounted={false} & disableAnimation={true}", async () => { + const wrapper = render( + + + Accordion Item 1 description + + + Accordion Item 2 description + + , + ); + + const item1 = wrapper.getByTestId("item-1"); + const button = item1.querySelector("button") as HTMLElement; + + expect(item1.querySelector("[role='region']")).not.toBeInTheDocument(); + + await user.click(button); + const item2 = wrapper.getByTestId("item-2"); + const button2 = item2.querySelector("button") as HTMLElement; + + await user.click(button2); + + await waitFor(() => { + expect(item1.querySelector("[role='region']")).not.toBeInTheDocument(); + expect(item2.querySelector("[role='region']")).toBeInTheDocument(); + }); }); it("should handle arrow key navigation within Input inside AccordionItem", async () => { diff --git a/packages/components/accordion/src/accordion-item.tsx b/packages/components/accordion/src/accordion-item.tsx index ee7d5e0ac..36463ac0b 100644 --- a/packages/components/accordion/src/accordion-item.tsx +++ b/packages/components/accordion/src/accordion-item.tsx @@ -54,7 +54,11 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => { const content = useMemo(() => { if (disableAnimation) { - return
{children}
; + if (keepContentMounted) { + return
{children}
; + } + + return isOpen &&
{children}
; } const transitionVariants: Variants = {