react-tabs: Can't use Tabs in another Tabs
<Tabs selectedIndex={1}>
<TabList>
<Tab>Disclosure Req.</Tab>
<Tab>Page Instructions</Tab>
</TabList>
<TabPanel>
<Instructions sectionName="DisclosuresRequirements" source="disclosures/instruction" />
</TabPanel>
<TabPanel>
<Tabs selectedIndex={1}>
<TabList>
<Tab>Disclosure Req.</Tab>
<Tab>Page Instructions</Tab>
</TabList>
<TabPanel>
<Instructions sectionName="DisclosuresRequirements" source="disclosures/instruction" />
</TabPanel>
<TabPanel>
<Instructions sectionName="EffortSummary" source="effort/instruction" />
</TabPanel>
</Tabs>
</TabPanel>
</Tabs>
When I click on inner second Tab it change parent second tab. Who can help me with this problem?
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Comments: 16 (1 by maintainers)
Commits related to this issue
- Fix nested Tabs (Issue #54) — committed to themattliberty/react-tabs by themattliberty 9 years ago
- Fix nested Tabs (Issue #54) — committed to themattliberty/react-tabs by themattliberty 8 years ago
- Fix nested Tabs (Issue #54) — committed to themattliberty/react-tabs by themattliberty 9 years ago
- Fix nested tabs issue #54 This builds off of @msliberty's commit at https://github.com/msliberty/react-tabs/commit/c4b4eafec51c40874f70f6aeb8d8f52d62068655 This one, however, doesn't assume that "... — committed to happycollision/react-tabs by happycollision 8 years ago
- Merge pull request #1 from happycollision/another-fix-for-nested-tabs Fix nested tabs issue #54 — committed to happycollision/react-tabs by happycollision 8 years ago
- Merge Fix nested Tabs (Issue #54) — committed to M1r1k/react-tabs by M1r1k 8 years ago
- Fix nesting of multiple instances of react-tabs (#103) Add a check that checks if the tab belongs to the container. Fixes #54 Fixes #91 — committed to reactjs/react-tabs by danez 8 years ago
Can one of the merge requests be accepted that solve the issue?
It happens because onlick (select tab) event is attached on whole component including tab panels. And when you put another tabs inside tab panel body - it fires twice. I bypassed this issue by attaching one more onclick listener - on parent tab panel - using stopPropagation().