diff --git a/.changeset/short-bulldogs-divide.md b/.changeset/short-bulldogs-divide.md new file mode 100644 index 0000000000..4e970f6671 --- /dev/null +++ b/.changeset/short-bulldogs-divide.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/accordion": patch +--- + +Fix input focus error in default expanded accordion item, add `onClick`, `onFocus` to `AccordionItem` content wrapper diff --git a/packages/components/accordion/__tests__/accordion.test.tsx b/packages/components/accordion/__tests__/accordion.test.tsx index 8a4d78df7e..dfd2f824c7 100644 --- a/packages/components/accordion/__tests__/accordion.test.tsx +++ b/packages/components/accordion/__tests__/accordion.test.tsx @@ -345,4 +345,22 @@ describe("Accordion", () => { expect(getByRole("separator")).toHaveClass("bg-rose-500"); }); + + it("should focus input inside default expanded accordion item correctly", async () => { + const wrapper = render( + + + + + , + ); + + const input = wrapper.container.querySelector("input"); + + expect(input).not.toBeNull(); + + await user.click(input!); + + expect(input).toHaveFocus(); + }); }); diff --git a/packages/components/accordion/src/accordion-item.tsx b/packages/components/accordion/src/accordion-item.tsx index fcdea9b5e3..be47c967d8 100644 --- a/packages/components/accordion/src/accordion-item.tsx +++ b/packages/components/accordion/src/accordion-item.tsx @@ -71,6 +71,12 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => { initial="exit" style={{willChange}} variants={transitionVariants} + onClick={(e) => { + e.stopPropagation(); + }} + onFocus={(e) => { + e.stopPropagation(); + }} onKeyDown={(e) => { e.stopPropagation(); }} @@ -90,6 +96,12 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => { initial="exit" style={{willChange}} variants={transitionVariants} + onClick={(e) => { + e.stopPropagation(); + }} + onFocus={(e) => { + e.stopPropagation(); + }} onKeyDown={(e) => { e.stopPropagation(); }}