React-bootstrap: Issue with activeKey Closing Tab

[patsissons]

I ran into this issue building a dynamic tab view demo. I am removing the active tab, and switching to the previous tab before removing. What i think is happening is that upon switching to the previous tab, the TabContent's _exitingPane is set, and then getChildContext() sets the activeKey to undefined instead of fetching the activeKey from the usual getActiveKey() call. With no activeKey set no tab content is rendered.

Fortunately, the temporary work around is relatively simple, since the activeKey just applies the active class to the tab element. We can simply supply this property at composition if we already know which tab should be active.

I'll try and build a fiddle to capture this issue.

[patsissons]

I believe this fiddle captures the issue correctly. You'll notice that if you click the close button inside of a tab, the proper next tab is selected but the content is not rendered until you click the tab header (which forces the active class back on the tab).

[MaxFrolov]

Faced with the same problem, when i remove some item from array, which create tabs - content is gone, when i click to tab, content returns.

[freak3dot]

+1 Also faced with this problem.

A colleague of mine overrode the active class on the Tab.Pane component. This is temporary until we have an official fix.