Fix #11994: TabView prevent detached DOM elements on TabClose (#11998)

primefaces · Jun 4, 2024 · ff0c381 · ff0c381
1 parent b183ca0
commit ff0c381
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/primefaces/src/main/resources/META-INF/resources/primefaces/core/core.utils.js b/primefaces/src/main/resources/META-INF/resources/primefaces/core/core.utils.js
@@ -1134,17 +1134,20 @@ if (!PrimeFaces.utils) {
                     jq.removeAttr(attributeName);
                 }
             }
+
+            // Remove the element from the DOM and trigger onRemove events for widget.destroy.
+            // IMPORTANT: This must occur before jq.off() to ensure the on("remove") events remain registered.
+            if (removeElement) {
+                jq.remove();
+            }
+
             // Remove event listeners
             jq.off();
-            
+
             // Clear data
             if (clearData) {
                 jq.removeData();
             }
-            // Remove elements itself from memory
-            if (removeElement) {
-                jq.remove();
-            }
         },
 
         /**

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,14 @@ 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
+        // remove and cleanse all traces of the header and contents of the panel
+        PrimeFaces.utils.cleanseDomElement(header);
+        PrimeFaces.utils.cleanseDomElement(panel);
+
+        // refresh "cached" selectors
         this.headerContainer = this.navContainer.children('li.ui-tabs-header');
         this.panelContainer = this.jq.children('.ui-tabs-panels');