feat: add tab ref (#3974)

* feat: add tab ref * feat: add changeset
nextui-org · Nov 4, 2024 · 7c2c9c4 · 7c2c9c4
1 parent cb1b313
commit 7c2c9c4
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 3 deletions.
diff --git a/.changeset/smooth-mayflies-wonder.md b/.changeset/smooth-mayflies-wonder.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/tabs": patch
+---
+
+Add tab ref
diff --git a/apps/docs/content/docs/components/tabs.mdx b/apps/docs/content/docs/components/tabs.mdx
@@ -276,6 +276,7 @@ You can customize the `Tabs` component by passing custom Tailwind CSS classes to
 
 | Attribute               | Type                          | Description                                                                                                                                                                      | Default |
 |-------------------------|-------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------|
+| tabRef                  | `RefObject<HTMLButtonElement>`| A ref to the tab item.                                                                                                                                                           | -       |
 | children\*              | `ReactNode`                   | The content of the tab.                                                                                                                                                          | -       |
 | title                   | `ReactNode`                   | The title of the tab.                                                                                                                                                            | -       |
 | titleValue              | `string`                      | A string representation of the item's contents. Use this when the `title` is not readable.                                                                                       | -       |

diff --git a/packages/components/tabs/__tests__/tabs.test.tsx b/packages/components/tabs/__tests__/tabs.test.tsx
@@ -388,4 +388,17 @@ describe("Tabs", () => {
 
     expect(input).toHaveValue("23");
   });
+
+  test("should forward ref to the tab item", () => {
+    const ref = React.createRef<HTMLButtonElement>();
+
+    render(
+      <Tabs aria-label="Tabs static test">
+        <Tab key="item1" tabRef={ref} title="Item 1">
+          <div>Content 1</div>
+        </Tab>
+      </Tabs>,
+    );
+    expect(ref.current).not.toBeNull();
+  });
 });
diff --git a/packages/components/tabs/src/base/tab-item-base.ts b/packages/components/tabs/src/base/tab-item-base.ts
@@ -1,5 +1,5 @@
 import {BaseItem, ItemProps} from "@nextui-org/aria-utils";
-import {ReactNode} from "react";
+import {ReactNode, RefObject} from "react";
 interface Props<T extends object = {}> extends Omit<ItemProps<"button", T>, "children" | "title"> {
   /**
    * The content of the component.
@@ -18,6 +18,8 @@ interface Props<T extends object = {}> extends Omit<ItemProps<"button", T>, "chi
   isDisabled?: boolean;
   /** Whether the tab selection should occur on press up instead of press down. */
   shouldSelectOnPressUp?: boolean;
+  /** A ref to the tab item. */
+  tabRef?: RefObject<HTMLButtonElement>;
 }
 
 export type TabItemProps<T extends object = {}> = Props<T>;

diff --git a/packages/components/tabs/src/tab.tsx b/packages/components/tabs/src/tab.tsx
@@ -1,7 +1,7 @@
 import type {TabItemProps as BaseTabItemProps} from "./base/tab-item-base";
 
 import {forwardRef} from "@nextui-org/system";
-import {useDOMRef, filterDOMProps} from "@nextui-org/react-utils";
+import {useDOMRef, filterDOMProps, mergeRefs} from "@nextui-org/react-utils";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
 import {chain, mergeProps} from "@react-aria/utils";
 import scrollIntoView from "scroll-into-view-if-needed";
@@ -44,6 +44,7 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
     disableCursorAnimation,
     shouldSelectOnPressUp,
     onClick,
+    tabRef,
     ...otherProps
   } = props;
 
@@ -94,7 +95,7 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
 
   return (
     <Component
-      ref={domRef}
+      ref={mergeRefs(domRef, tabRef)}
       data-disabled={dataAttr(isDisabledItem)}
       data-focus={dataAttr(isFocused)}
       data-focus-visible={dataAttr(isFocusVisible)}