[V4] Throw error when a plugin is in transition (#17823)

* Throw error when a plugin is in transition
* Add unit tests about plugins in transition

1 files changed, 18 insertions, 8 deletions

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 2b659b885..dc291a72c 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -123,11 +123,12 @@ const Tooltip = (($) => {
     constructor(element, config) {
 
       // private
-      this._isEnabled     = true
-      this._timeout       = 0
-      this._hoverState    = ''
-      this._activeTrigger = {}
-      this._tether        = null
+      this._isEnabled        = true
+      this._timeout          = 0
+      this._hoverState       = ''
+      this._activeTrigger    = {}
+      this._isTransitioning  = false
+      this._tether           = null
 
       // protected
       this.element = element
@@ -245,9 +246,12 @@ const Tooltip = (($) => {
       if ($(this.element).css('display') === 'none') {
         throw new Error('Please use show on visible elements')
       }
-      const showEvent = $.Event(this.constructor.Event.SHOW)
 
+      const showEvent = $.Event(this.constructor.Event.SHOW)
       if (this.isWithContent() && this._isEnabled) {
+        if (this._isTransitioning) {
+          throw new Error('Tooltip is transitioning')
+        }
         $(this.element).trigger(showEvent)
 
         const isInTheDom = $.contains(
@@ -303,7 +307,8 @@ const Tooltip = (($) => {
 
         const complete = () => {
           const prevHoverState = this._hoverState
-          this._hoverState     = null
+          this._hoverState   = null
+          this._isTransitioning = false
 
           $(this.element).trigger(this.constructor.Event.SHOWN)
 
@@ -313,6 +318,7 @@ const Tooltip = (($) => {
         }
 
         if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) {
+          this._isTransitioning = true
           $(this.tip)
             .one(Util.TRANSITION_END, complete)
             .emulateTransitionEnd(Tooltip._TRANSITION_DURATION)
@@ -326,6 +332,9 @@ const Tooltip = (($) => {
     hide(callback) {
       const tip       = this.getTipElement()
       const hideEvent = $.Event(this.constructor.Event.HIDE)
+      if (this._isTransitioning) {
+        throw new Error('Tooltip is transitioning')
+      }
       const complete  = () => {
         if (this._hoverState !== HoverState.ACTIVE && tip.parentNode) {
           tip.parentNode.removeChild(tip)
@@ -333,6 +342,7 @@ const Tooltip = (($) => {
 
         this.element.removeAttribute('aria-describedby')
         $(this.element).trigger(this.constructor.Event.HIDDEN)
+        this._isTransitioning = false
         this.cleanupTether()
 
         if (callback) {
@@ -350,7 +360,7 @@ const Tooltip = (($) => {
 
       if (Util.supportsTransitionEnd() &&
           $(this.tip).hasClass(ClassName.FADE)) {
-
+        this._isTransitioning = true
         $(tip)
           .one(Util.TRANSITION_END, complete)
           .emulateTransitionEnd(TRANSITION_DURATION)