fix(Transition): schedule changes only on status change (#4060)

Author: layershifter

src/modules/Transition/Transition.js

@@ -87,16 +87,17 @@ export default class Transition extends Component {
     const durationType = TRANSITION_CALLBACK_TYPE[nextStatus]
     const durationValue = normalizeTransitionDuration(duration, durationType)
 
-    clearTimeout(this.timeoutId)
-    this.timeoutId = setTimeout(
-      () => this.setState((state) => ({ status: state.nextStatus })),
-      durationValue,
-    )
+    this.timeoutId = setTimeout(() => this.setState({ status: nextStatus }), durationValue)
   }
 
   updateStatus = (prevState) => {
-    if (this.state.status !== this.state.nextStatus && this.state.nextStatus) {
-      this.handleStart(this.state.nextStatus)
+    if (prevState.status !== this.state.status) {
+      // Timeout should be cleared in any case as previous can lead set to unexpected `nextStatus`
+      clearTimeout(this.timeoutId)
+
+      if (this.state.nextStatus) {
+        this.handleStart(this.state.nextStatus)
+      }
     }
 
     if (!prevState.animating && this.state.animating) {

test/specs/modules/Transition/Transition-test.js

@@ -419,6 +419,27 @@ describe('Transition', () => {
         </Transition>,
       )
     })
+
+    it('is called after a render with visibility changes', (done) => {
+      // This test ensures that a setTimeout will not be cleared on a simple rerender
+      // https://github.com/Semantic-Org/Semantic-UI-React/issues/4059
+
+      const onComplete = sandbox.spy()
+
+      wrapperMount(
+        <Transition duration={200} onComplete={onComplete} transitionOnMount>
+          <p />
+        </Transition>,
+      )
+
+      setTimeout(() => {
+        wrapper.setProps({})
+      }, 100)
+      setTimeout(() => {
+        onComplete.should.have.been.calledOnce()
+        done()
+      }, 250)
+    })
   })
 
   describe('onHide', () => {