fix: Allow tab to un/mount with transition

[fungjj92]

Overview

The Tabpane component has a bug where when set to unmount on exit, any transitions are ignored. The solution was already discussed in issue #3497 by @sisp and @jquense ; I am shepherding it to the library.

Demo

@sisp created a codesandbox showing how in the latest release of react-bootstrap <TabPane ... unmountOnExit=true /> on does not execute the transition between tabs.

Refs #3497

[taion]

would be good to add a test here

[fungjj92]

Thanks for your speedy response, meanwhile pardon my delays! I agree a test would be good. I'm not familiar with enzyme. Ideally, I'd be able to test the className progression (the entering and exiting phases) to ensure the transition is being applied. I don't get the sense this can be done, rather a test will only be able to naively check the final classNames. Please advise. Thanks!

[taion]

Take a look at e.g.

react-bootstrap/test/ToastSpec.js

Line 54 in b81eb86

const clock = sinon.useFakeTimers();

and other things that interact with the fake timer system. It seems like it should be possible to use those to delay the transition finishing, to assert on the intermediate classes.

[fungjj92]

I was reminded this PR was still hanging out 🐌 I just rebased and pushed changes. I had taken a look at writing a test, which I agree would be helpful, but struggled to fake the desired behavior. Would gladly accept a test commit to this branch if it is deemed necessary.

[taion]

well, i guess i'm okay with this for now.

the non-transition case is a bit funky in that we shouldn't mount this until the first render if mountOnEnter is false, but that's not a regression per se

[kosmiq]

I tested it and the fix works. The lack of a test is a bit unfortunate, however we do not currently have tests for animation of tabs as far as I can tell.

We could probably merge this fix and add the test case to the ongoing issue #3889 ?