feat(tabs): add click handling for tab items in tests and implementation

heroui-inc · Oct 18, 2024 · 9a3550a · 9a3550a
1 parent 8a33eab
commit 9a3550a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/packages/components/tabs/__tests__/tabs.test.tsx b/packages/components/tabs/__tests__/tabs.test.tsx
@@ -388,4 +388,27 @@ describe("Tabs", () => {
 
     expect(input).toHaveValue("23");
   });
+
+  it("Tab click should be handled", async () => {
+    const item1Click = jest.fn();
+    const item2Click = jest.fn();
+    const wrapper = render(
+      <Tabs>
+        <Tab key="item1" data-testid="item1" title="Item 1" onClick={item1Click}>
+          <div>Content 1</div>
+        </Tab>
+        <Tab key="item2" data-testid="item2" title="Item 2" onClick={item2Click}>
+          <div>Content 2</div>
+        </Tab>
+      </Tabs>,
+    );
+    const tab1 = wrapper.getByTestId("item1");
+    const tab2 = wrapper.getByTestId("item2");
+
+    await user.click(tab1);
+    expect(item1Click).toHaveBeenCalled();
+
+    await user.click(tab2);
+    expect(item2Click).toHaveBeenCalled();
+  });
 });
diff --git a/packages/components/tabs/src/tab.tsx b/packages/components/tabs/src/tab.tsx
@@ -78,8 +78,8 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
     rerender: true,
   });
 
-  const handleClick = () => {
-    chain(onClick, tabProps.onClick);
+  const handleClick = (...args: any[]) => {
+    chain(onClick, tabProps.onClick)(...args);
 
     if (!domRef?.current || !listRef?.current) return;