From a6a2d1e2df4f97486d1715a709f40f85193c4ef6 Mon Sep 17 00:00:00 2001
From: GeoSot <geo.sotis@gmail.com>
Date: Tue, 3 Aug 2021 11:59:33 +0300
Subject: [PATCH] Regression on tooltip template creation process. (#34628)

* Regression on tooltip template creation process.

* check if template content does not exist, or given argument is empty

* call `setContent()` once.
---
 js/src/popover.js             |  4 +---
 js/src/tooltip.js             |  9 ++++-----
 js/tests/unit/popover.spec.js | 33 ++++++++++++++++++++++++++++++++-
 js/tests/unit/tooltip.spec.js |  4 ++--
 4 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/js/src/popover.js b/js/src/popover.js
index 15deaafe23..dbd67558f8 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -84,9 +84,7 @@ class Popover extends Tooltip {
     return this.getTitle() || this._getContent()
   }
 
-  setContent() {
-    const tip = this.getTipElement()
-
+  setContent(tip) {
     this._sanitizeAndSetContent(tip, this.getTitle(), SELECTOR_TITLE)
     this._sanitizeAndSetContent(tip, this._getContent(), SELECTOR_CONTENT)
   }
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index f932a9ff99..2632e46e00 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -243,8 +243,6 @@ class Tooltip extends BaseComponent {
     tip.setAttribute('id', tipId)
     this._element.setAttribute('aria-describedby', tipId)
 
-    this.setContent()
-
     if (this._config.animation) {
       tip.classList.add(CLASS_NAME_FADE)
     }
@@ -371,20 +369,21 @@ class Tooltip extends BaseComponent {
     element.innerHTML = this._config.template
 
     const tip = element.children[0]
+    this.setContent(tip)
     tip.classList.remove(CLASS_NAME_FADE, CLASS_NAME_SHOW)
 
     this.tip = tip
     return this.tip
   }
 
-  setContent() {
-    const tip = this.getTipElement()
+  setContent(tip) {
     this._sanitizeAndSetContent(tip, this.getTitle(), SELECTOR_TOOLTIP_INNER)
   }
 
   _sanitizeAndSetContent(template, content, selector) {
     const templateElement = SelectorEngine.findOne(selector, template)
-    if (!content) {
+
+    if (!content && templateElement) {
       templateElement.remove()
       return
     }
diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js
index 5460528b4c..c54fc49eee 100644
--- a/js/tests/unit/popover.spec.js
+++ b/js/tests/unit/popover.spec.js
@@ -1,7 +1,7 @@
 import Popover from '../../src/popover'
 
 /** Test helpers */
-import { getFixture, clearFixture, jQueryMock } from '../helpers/fixture'
+import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture'
 
 describe('Popover', () => {
   let fixtureEl
@@ -157,6 +157,37 @@ describe('Popover', () => {
       popover.show()
     })
 
+    it('should call setContent once', done => {
+      fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
+
+      const popoverEl = fixtureEl.querySelector('a')
+      const popover = new Popover(popoverEl, {
+        content: 'Popover content'
+      })
+
+      const spy = spyOn(popover, 'setContent').and.callThrough()
+      let times = 1
+
+      popoverEl.addEventListener('hidden.bs.popover', () => {
+        popover.show()
+      })
+
+      popoverEl.addEventListener('shown.bs.popover', () => {
+        const popoverDisplayed = document.querySelector('.popover')
+
+        expect(popoverDisplayed).not.toBeNull()
+        expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Popover content')
+        expect(spy).toHaveBeenCalledTimes(1)
+        if (times > 1) {
+          done()
+        }
+
+        times++
+        popover.hide()
+      })
+      popover.show()
+    })
+
     it('should show a popover with provided custom class', done => {
       fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap" data-bs-custom-class="custom-class">BS twitter</a>'
 
diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index f3f90c3a3f..22a7edd017 100644
--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -1045,10 +1045,10 @@ describe('Tooltip', () => {
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
 
-      tooltip.setContent()
-
       const tip = tooltip.getTipElement()
 
+      tooltip.setContent(tip)
+
       expect(tip.classList.contains('show')).toEqual(false)
       expect(tip.classList.contains('fade')).toEqual(false)
       expect(tip.querySelector('.tooltip-inner').textContent).toEqual('Another tooltip')