From 76d7f2ffacf979498b1d5aa8a60c9071f78a001e Mon Sep 17 00:00:00 2001
From: Mitchell Bryson <mitchelljbryson@gmail.com>
Date: Fri, 2 Oct 2020 10:03:37 +0100
Subject: [PATCH 1/8] check for data-interval on the first slide of carousel
 (#31716)

---
 js/src/carousel.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/js/src/carousel.js b/js/src/carousel.js
index 62b4ce1e4dd1..61e856bb8f8d 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -169,6 +169,16 @@ class Carousel {
     }
 
     if (this._config.interval && !this._isPaused) {
+      this._activeElement = this._element.querySelector(SELECTOR_ACTIVE_ITEM)
+
+      if (this._activeElement) {
+        const activeElementInterval = parseInt(this._activeElement.getAttribute('data-interval'), 10)
+
+        if (activeElementInterval) {
+          this._config.interval = activeElementInterval
+        }
+      }
+
       this._interval = setInterval(
         (document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
         this._config.interval

From 49f7dfe7c081dad3756b10e6a69f6e9d5465a7e1 Mon Sep 17 00:00:00 2001
From: Mitchell Bryson <mitchelljbryson@gmail.com>
Date: Fri, 2 Oct 2020 10:34:30 +0100
Subject: [PATCH 2/8] add updateInterval method for elements of a carousel

---
 js/src/carousel.js | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/js/src/carousel.js b/js/src/carousel.js
index 61e856bb8f8d..fd71b7ad40d3 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -172,11 +172,7 @@ class Carousel {
       this._activeElement = this._element.querySelector(SELECTOR_ACTIVE_ITEM)
 
       if (this._activeElement) {
-        const activeElementInterval = parseInt(this._activeElement.getAttribute('data-interval'), 10)
-
-        if (activeElementInterval) {
-          this._config.interval = activeElementInterval
-        }
+        this._updateInterval(this._activeElement)
       }
 
       this._interval = setInterval(
@@ -411,6 +407,17 @@ class Carousel {
     }
   }
 
+  _updateInterval(element) {
+    const elementInterval = parseInt(element.getAttribute('data-interval'), 10)
+
+    if (elementInterval) {
+      this._config.defaultInterval = this._config.defaultInterval || this._config.interval
+      this._config.interval = elementInterval
+    } else {
+      this._config.interval = this._config.defaultInterval || this._config.interval
+    }
+  }
+
   _slide(direction, element) {
     const activeElement = this._element.querySelector(SELECTOR_ACTIVE_ITEM)
     const activeElementIndex = this._getItemIndex(activeElement)
@@ -471,13 +478,7 @@ class Carousel {
       $(activeElement).addClass(directionalClassName)
       $(nextElement).addClass(directionalClassName)
 
-      const nextElementInterval = parseInt(nextElement.getAttribute('data-interval'), 10)
-      if (nextElementInterval) {
-        this._config.defaultInterval = this._config.defaultInterval || this._config.interval
-        this._config.interval = nextElementInterval
-      } else {
-        this._config.interval = this._config.defaultInterval || this._config.interval
-      }
+      this._updateInterval(nextElement)
 
       const transitionDuration = Util.getTransitionDurationFromElement(activeElement)
 

From a4d758d5a7257a1e519152614fc1f1cf167d1c7c Mon Sep 17 00:00:00 2001
From: Mitchell Bryson <mitchelljbryson@gmail.com>
Date: Fri, 2 Oct 2020 10:40:20 +0100
Subject: [PATCH 3/8] expand carousel unit test to cover initial slide element

---
 js/tests/unit/carousel.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 757461575b90..4501fb4483e9 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -516,6 +516,11 @@ $(function () {
         '</div>'
     var $carousel = $(templateHTML)
 
+    $carousel.appendTo('body')
+    $carousel.bootstrapCarousel(0)
+    assert.strictEqual($carousel.data('bs.carousel')._config.interval, 2814)
+    $carousel.remove()
+
     $carousel.appendTo('body')
     $carousel.bootstrapCarousel(1)
     assert.strictEqual($carousel.data('bs.carousel')._config.interval, 3814)

From fa9c367a66c5e3cf039824d673d1ae72190b0c14 Mon Sep 17 00:00:00 2001
From: Mitchell Bryson <mitchelljbryson@gmail.com>
Date: Fri, 2 Oct 2020 13:08:56 +0100
Subject: [PATCH 4/8] fix carousel interval test

---
 js/tests/unit/carousel.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 4501fb4483e9..dc7a7ff36a6a 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -480,7 +480,7 @@ $(function () {
   })
 
   QUnit.test('should set interval from data attribute on individual carousel-item', function (assert) {
-    assert.expect(2)
+    assert.expect(3)
     var templateHTML = '<div id="myCarousel" class="carousel slide" data-interval="1814">' +
         '<div class="carousel-inner">' +
         '<div class="carousel-item active" data-interval="2814">' +

From c22485df4a4947501937aba0f27b2ef6264f3cd7 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Fri, 2 Oct 2020 17:52:14 +0300
Subject: [PATCH 5/8] Update .bundlewatch.config.json

---
 .bundlewatch.config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index fb76d8dd83b8..1b4444728788 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",
-      "maxSize": "47.5 kB"
+      "maxSize": "48 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.min.js",

From d85e48a050235f0071721980e51ce9130a84a991 Mon Sep 17 00:00:00 2001
From: Mitchell Bryson <mitchelljbryson@gmail.com>
Date: Sat, 3 Oct 2020 10:24:33 +0100
Subject: [PATCH 6/8] update activeElement as soon as slide has finished
 (before transition end)

---
 js/src/carousel.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/js/src/carousel.js b/js/src/carousel.js
index fd71b7ad40d3..b8a71df948fd 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -169,7 +169,7 @@ class Carousel {
     }
 
     if (this._config.interval && !this._isPaused) {
-      this._activeElement = this._element.querySelector(SELECTOR_ACTIVE_ITEM)
+      this._activeElement = this._activeElement || this._element.querySelector(SELECTOR_ACTIVE_ITEM)
 
       if (this._activeElement) {
         this._updateInterval(this._activeElement)
@@ -503,6 +503,9 @@ class Carousel {
       $(this._element).trigger(slidEvent)
     }
 
+    // does not wait for the transition to complete
+    this._activeElement = nextElement
+
     if (isCycling) {
       this.cycle()
     }

From d9b167b23ca8f3c494e5bc51904a67bc4156a219 Mon Sep 17 00:00:00 2001
From: Mitchell Bryson <mitchelljbryson@gmail.com>
Date: Wed, 4 Nov 2020 10:38:39 +0000
Subject: [PATCH 7/8] set activeElement on carousel slide

---
 js/src/carousel.js | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/js/src/carousel.js b/js/src/carousel.js
index d390f9a9011d..cc6ae44079f2 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -169,11 +169,7 @@ class Carousel {
     }
 
     if (this._config.interval && !this._isPaused) {
-      this._activeElement = this._activeElement || this._element.querySelector(SELECTOR_ACTIVE_ITEM)
-
-      if (this._activeElement) {
-        this._updateInterval(this._activeElement)
-      }
+      this._updateInterval()
 
       this._interval = setInterval(
         (document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
@@ -407,7 +403,13 @@ class Carousel {
     }
   }
 
-  _updateInterval(element) {
+  _updateInterval() {
+    const element = this._activeElement || this._element.querySelector(SELECTOR_ACTIVE_ITEM)
+
+    if (!element) {
+      return
+    }
+
     const elementInterval = parseInt(element.getAttribute('data-interval'), 10)
 
     if (elementInterval) {
@@ -462,6 +464,7 @@ class Carousel {
     }
 
     this._setActiveIndicatorElement(nextElement)
+    this._activeElement = nextElement
 
     const slidEvent = $.Event(EVENT_SLID, {
       relatedTarget: nextElement,
@@ -478,8 +481,6 @@ class Carousel {
       $(activeElement).addClass(directionalClassName)
       $(nextElement).addClass(directionalClassName)
 
-      this._updateInterval(nextElement)
-
       const transitionDuration = Util.getTransitionDurationFromElement(activeElement)
 
       $(activeElement)
@@ -503,9 +504,6 @@ class Carousel {
       $(this._element).trigger(slidEvent)
     }
 
-    // does not wait for the transition to complete
-    this._activeElement = nextElement
-
     if (isCycling) {
       this.cycle()
     }

From 4f36e31b3f6e7fac10f654c01f89f7643e0f9ba0 Mon Sep 17 00:00:00 2001
From: Mitchell Bryson <mitchelljbryson@gmail.com>
Date: Wed, 4 Nov 2020 11:50:05 +0000
Subject: [PATCH 8/8] update carousel tests

---
 js/tests/unit/carousel.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index dc7a7ff36a6a..3c3e203e538a 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -480,7 +480,7 @@ $(function () {
   })
 
   QUnit.test('should set interval from data attribute on individual carousel-item', function (assert) {
-    assert.expect(3)
+    assert.expect(4)
     var templateHTML = '<div id="myCarousel" class="carousel slide" data-interval="1814">' +
         '<div class="carousel-inner">' +
         '<div class="carousel-item active" data-interval="2814">' +
@@ -516,18 +516,26 @@ $(function () {
         '</div>'
     var $carousel = $(templateHTML)
 
+    $carousel.appendTo('body')
+    $carousel.bootstrapCarousel()
+    assert.strictEqual($carousel.data('bs.carousel')._config.interval, 1814)
+    $carousel.remove()
+
     $carousel.appendTo('body')
     $carousel.bootstrapCarousel(0)
+    $carousel.data('bs.carousel').cycle()
     assert.strictEqual($carousel.data('bs.carousel')._config.interval, 2814)
     $carousel.remove()
 
     $carousel.appendTo('body')
     $carousel.bootstrapCarousel(1)
+    $carousel.data('bs.carousel').cycle()
     assert.strictEqual($carousel.data('bs.carousel')._config.interval, 3814)
     $carousel.remove()
 
     $carousel.appendTo('body')
     $carousel.bootstrapCarousel(2)
+    $carousel.data('bs.carousel').cycle()
     assert.strictEqual($carousel.data('bs.carousel')._config.interval, 1814, 'reverts to default interval if no data-interval is set')
     $carousel.remove()
   })