diff --git a/.changeset/seven-tips-help.md b/.changeset/seven-tips-help.md new file mode 100644 index 0000000000..8e96758913 --- /dev/null +++ b/.changeset/seven-tips-help.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/tabs": patch +--- + +add click handling for tab items in tests and implementation diff --git a/packages/components/tabs/__tests__/tabs.test.tsx b/packages/components/tabs/__tests__/tabs.test.tsx index fe7751e443..35512f49ed 100644 --- a/packages/components/tabs/__tests__/tabs.test.tsx +++ b/packages/components/tabs/__tests__/tabs.test.tsx @@ -388,4 +388,36 @@ describe("Tabs", () => { expect(input).toHaveValue("23"); }); + + it("Tab click should be handled", async () => { + const item1Click = jest.fn(); + const item2Click = jest.fn(); + const wrapper = render( + + +
Content 1
+
+ +
Content 2
+
+
, + ); + const tab1 = wrapper.getByTestId("item1"); + const tab2 = wrapper.getByTestId("item2"); + + // Test initial state + expect(tab1).toHaveAttribute("aria-selected", "true"); + expect(tab2).toHaveAttribute("aria-selected", "false"); + + // Test clicking tab2 + await user.click(tab2); + expect(item2Click).toHaveBeenCalledTimes(1); + expect(tab1).toHaveAttribute("aria-selected", "false"); + expect(tab2).toHaveAttribute("aria-selected", "true"); + + // Test clicking tab2 again + await user.click(tab2); + expect(item2Click).toHaveBeenCalledTimes(2); + expect(tab2).toHaveAttribute("aria-selected", "true"); + }); }); diff --git a/packages/components/tabs/src/tab.tsx b/packages/components/tabs/src/tab.tsx index 1be4868b4e..8497389804 100644 --- a/packages/components/tabs/src/tab.tsx +++ b/packages/components/tabs/src/tab.tsx @@ -79,7 +79,7 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => { }); const handleClick = () => { - chain(onClick, tabProps.onClick); + chain(onClick, tabProps.onClick)(); if (!domRef?.current || !listRef?.current) return;