archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: WK Wong <wingkwong.code@gmail.com>
This commit is contained in:
liaoyinglong 2025-06-01 21:03:18 +04:00 committed by GitHub
parent 6129e4bc79
commit 718dc24ff5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 38 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/seven-tips-help.md Normal file
View File

@ -0,0 +1,5 @@
---
"@heroui/tabs": patch
---
fixed click handling for tab items

32
packages/components/tabs/__tests__/tabs.test.tsx
View File

@ -400,4 +400,36 @@ describe("Tabs", () => {
);
expect(ref.current).not.toBeNull();
});
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");
// 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");
});
});

2
packages/components/tabs/src/tab.tsx
View File

@ -80,7 +80,7 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
});
const handleClick = () => {
chain(onClick, tabProps.onClick);
chain(onClick, tabProps.onClick)();
if (!domRef?.current || !listRef?.current) return;