Can't use Tabs in another Tabs

[alexisinwork]

<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?

[strafe89]

I faced same problem.

[KyleAMathews]

Just ran into this too

[mzabriskie]

Sorry I don't have a lot of time right now to look into this. If someone wants to take a stab at a fix I'd welcome a PR.

[strafe89]

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().

[jamesaevans]

@strafe89 could you elaborate on your solution?

[kirankashalkar]

Can one of the merge requests be accepted that solve the issue?

[kirankashalkar]

Please accept a merge. Nested tabs is an important feature to make this component production ready.

[peternsgsi]

Will this be fixed/merged soon? I like this component but need nesting - I'll have to use something else if this isn't resolved.

[kirankashalkar]

@PeterNelson815 - what did you end up going with?