Close TabPanel if Tab is click one more time

[lauterry]

Hi

I have an use case where I need to close the TabPanel if I click on the corresponding Tab is clicked a second time.

When I click a the Tab a second time, the onSelect callback is not triggered.

How can I performed that please ?

Best regards

[alexanderwallin]

I think you can add an onClick prop to your <Tab> elements, and then update the selectedIndex prop on <Tabs>.

Give it a try!

[alexanderwallin]

I saw now that this issue is 20 days old. Have you solved it yet, @lauterry? If so, please close the issue, and best of all share your solution! :)

[lauterry]

Hi @alexanderwallin

I have implemented exactly what you have suggested :

<Tab					
   onClick={ () => {
       this.handleSelect(0);
   } }>
</Tab>

handleSelect(index) {
    this.setState({
	selectedTab: this.state.selectedTab === index ? 4 : index
    });
}

In order to close the opened tab, this.state.selectedTab must not be equal to an index of an existing tab.

In my example, if you have 3 tabs, in order to close a tab, you can set the value of this.state.selectedTab to 4

Best regards

[aparij]

To future proof the solution, you can send -1 instead of some number which can become a valid index if you add extra tabs.

[lauterry]

@aparij You're right !