Fix primefaces#11994: TabView prevent detached DOM elements on TabClose

melloware · May 23, 2024 · 32e5c12 · 32e5c12
1 parent 9e37569
commit 32e5c12
Showing 1 changed file with 21 additions and 16 deletions.
diff --git a/primefaces/src/main/resources/META-INF/resources/primefaces/tabview/tabview.js b/primefaces/src/main/resources/META-INF/resources/primefaces/tabview/tabview.js
@@ -697,14 +697,7 @@ PrimeFaces.widget.TabView = PrimeFaces.widget.DeferredWidget.extend({
      * @param {number} index 0-based index of the tab to close.
      */
     remove: function(index) {
-        // remove old header and content
-        var header = this.headerContainer.eq(index),
-        panel = this.panelContainer.children().eq(index);
-
-        header.remove();
-        panel.remove();
-
-        // refresh "chached" selectors
+        // refresh "cached" selectors
         this.headerContainer = this.navContainer.children('li.ui-tabs-header');
         this.panelContainer = this.jq.children('.ui-tabs-panels');
 
@@ -733,7 +726,8 @@ PrimeFaces.widget.TabView = PrimeFaces.widget.DeferredWidget.extend({
             this.cfg.selected = -1;
         }
 
-        this.fireTabCloseEvent(panel.attr('id'), index);
+        var panel = this.panelContainer.children().eq(index);
+        this.fireTabCloseEvent(panel, index);
     },
 
     /**
@@ -771,19 +765,30 @@ PrimeFaces.widget.TabView = PrimeFaces.widget.DeferredWidget.extend({
     /**
      * Calls the appropriate behaviors when a tab was closed.
      * @private
-     * @param {string} id Client ID of the tab that was closed.
+     * @param {JQuery} panel Tab panel that was closed
      * @param {number} index 0-based index of the tab that was closed.
      */
-    fireTabCloseEvent: function(id, index) {
-        if(this.hasBehavior('tabClose')) {
+    fireTabCloseEvent: function(panel, index) {
+        var header = this.headerContainer.eq(index);
+
+        // remove and cleanse all traces of the header and contents of the panel
+        var cleanupDom = function() {
+            PrimeFaces.utils.cleanseDomElement(header);
+            PrimeFaces.utils.cleanseDomElement(panel);
+        };
+
+        if (this.hasBehavior("tabClose")) {
             var ext = {
                 params: [
-                    {name: this.id + '_closeTab', value: id},
-                    {name: this.id + '_tabindex', value: index}
-                ]
+                    { name: this.id + "_closeTab", value: panel.attr('id') },
+                    { name: this.id + "_tabindex", value: index },
+                ],
+                oncomplete: cleanupDom,
             };
 
-            this.callBehavior('tabClose', ext);
+            this.callBehavior("tabClose", ext);
+        } else {
+            cleanupDom();
         }
     },