Removing Open Tab

[maxsalven]

My tabs are rendered from a prop (simplified example:tabs: ['Hi', 'There']).

If I delete a tab that is currently selected, another tab doesn't get selected/rendered, and it just shows no content. Rather than making a user have to deal with selectedIndex in this situation, it would be nice if the component automatically selected another tab (perhaps the first tab, or the tab prior to the deleted tab, would be sensible options). This allows me to keep my component stateless and simple.

<Tabs>
  <TabList>
    {tabs.map(content => (<Tab>{content}</Tab>)}
  </TabList>
  {tabs.map((content, index) => (
    <TabPanel>
      <div>
        {content} - <span onClick={() => this.deleteTab(index)}>Delete</span>
      </div>
    </TabPanel>
  )}
</Tabs>

[danez]

Thanks for reporting.

We have an example that is doing exactly what you are describing, but there it seems to work. I could reproduce it for the last tab. When the last tab gets removed nothing is rendered, but for any tab before the last tab it seems to work for me.

Can you have a look or try the example and maybe you can figure out what is the difference?

[patrick91]

The issue happens also with your example, but only when removing all the initial tabs and adding a few of them dynamically:

https://gfycat.com/EnormousBelatedArctichare

Maybe we need to store the current selected item using keys (or an unique id) so that when a tab is removed we restore the selected item correctly. And if the current tab is being removed we can select the previous one.

[danez]

ok i was now able to reproduce.

The question now is what should happen in this case.

maybe trying to remember the last open tab like you said and if not available just the one to the left, and if that not exist the one to the right.

Although I just saw that there is another problem with the example, as in the example we set selectedIndex=n which somehow gets copied to state again when removing a tab, so it always defaults to the last (non existent) tab after removing a tab. So probably the complete fix is something like #80.

[patrick91]

Thinking more about it probably the best thing is to show the new last tab, not taking care of what the user had previously selected. You're showing the last, so if that is removed let's show the new last tab.

Does it make sense?

[danez]

I fixed the example to correctly handle the selectedIndex in 3bf3d68

I'm now also not sure if the Tabs component itself could do anything like this. Because it would need to know which tab gets removed, but that information is not available, so the only thing that could be done is to check if the selectedIndex is out of the upper bound and set it to the tabs.length - 1.

[danez]

I tested again and it seems to work with upcoming 1.0. Please reopen if issue persists.