fix: add ref to AccordionItem nextui-org#3498

AnthonyPaulO · Sep 5, 2024 · 094dffe · 094dffe
1 parent f052c34
commit 094dffe
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/packages/components/accordion/__tests__/accordion.test.tsx b/packages/components/accordion/__tests__/accordion.test.tsx
@@ -375,4 +375,15 @@ describe("Accordion", () => {
 
  expect(getByRole("separator")).toHaveClass("bg-rose-500");
  });
+
+ it("AccordionItem ref should be forwarded", () => {
+ const ref = React.createRef<HTMLButtonElement>();
+
+ render(
+ <Accordion>
+ <AccordionItem ref={ref}>Accordion Item</AccordionItem>
+ </Accordion>,
+ );
+ expect(ref.current).not.toBeNull();
+ });
 });
diff --git a/packages/components/accordion/src/accordion.tsx b/packages/components/accordion/src/accordion.tsx
@@ -36,6 +36,7 @@ const AccordionGroup = forwardRef<"div", AccordionProps>((props, ref) => {
  return (
  <Fragment key={item.key}>
  <AccordionItem
+ ref={(props.children[index] || props.children).ref}
  item={item}
  variant={props.variant}
  onFocusChange={handleFocusChanged}

diff --git a/packages/components/accordion/src/base/accordion-item-base.tsx b/packages/components/accordion/src/base/accordion-item-base.tsx
@@ -7,7 +7,7 @@ import type {
 import {As} from "@nextui-org/system";
 import {ItemProps, BaseItem} from "@nextui-org/aria-utils";
 import {FocusableProps, PressEvents} from "@react-types/shared";
-import {ReactNode, MouseEventHandler} from "react";
+import {ReactNode, MouseEventHandler, Ref} from "react";
 import {HTMLMotionProps} from "framer-motion";
 
 export type AccordionItemIndicatorProps = {
@@ -94,7 +94,8 @@ export interface Props<T extends object = {}>
  HeadingComponent?: As;
 }
 
-export type AccordionItemBaseProps<T extends object = {}> = Props<T> & AccordionItemVariantProps;
+export type AccordionItemBaseProps<T extends object = {}> = Props<T> &
+ AccordionItemVariantProps & {ref?: Ref<HTMLButtonElement>};
 
 const AccordionItemBase = BaseItem as (props: AccordionItemBaseProps) => JSX.Element;