Popover - call `content` once if it's a function. (#24690)

2 files changed, 27 insertions, 4 deletions

diff --git a/js/src/popover.js b/js/src/popover.js
index 4fb96a792..5534f4441 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -124,7 +124,11 @@ const Popover = (($) => {
 
       // we use append for html objects to maintain js events
       this.setElementContent($tip.find(Selector.TITLE), this.getTitle())
-      this.setElementContent($tip.find(Selector.CONTENT), this._getContent())
+      let content = this._getContent()
+      if (typeof content === 'function') {
+        content = content.call(this.element)
+      }
+      this.setElementContent($tip.find(Selector.CONTENT), content)
 
       $tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`)
     }
@@ -133,9 +137,7 @@ const Popover = (($) => {
 
     _getContent() {
       return this.element.getAttribute('data-content')
-        || (typeof this.config.content === 'function' ?
-              this.config.content.call(this.element) :
-              this.config.content)
+        || this.config.content
     }
 
     _cleanTipClass() {
diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js
index b5ea714ea..972da7828 100644
--- a/js/tests/unit/popover.js
+++ b/js/tests/unit/popover.js
@@ -410,4 +410,25 @@ $(function () {
       $popover.trigger($.Event('click'))
     }, 200)
   })
+
+  QUnit.test('popover should call content function only once', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+    var nbCall = 0
+    $('<div id="popover" style="display:none">content</div>').appendTo('#qunit-fixture')
+    var $popover = $('<a href="#">@Johann-S</a>')
+      .appendTo('#qunit-fixture')
+      .bootstrapPopover({
+        content: function () {
+          nbCall++
+          return $('#popover').clone().show().get(0)
+        }
+      })
+      .on('shown.bs.popover', function () {
+        assert.strictEqual(nbCall, 1)
+        done()
+      })
+
+    $popover.trigger($.Event('click'))
+  })
 })