fix issue where filepond detach method was not called

Author: rikschennink

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 5.1.3
+
+- Fix FilePond detach handling
+
+
 ## 5.1.2
 
 - Fix issue with 'input' event.

dist/vue-filepond.esm.js

@@ -1,5 +1,5 @@
 /*!
- * vue-filepond v5.1.2
+ * vue-filepond v5.1.3
  * A handy FilePond adapter component for Vue
  * 
  * Copyright (c) 2019 PQINA
@@ -185,14 +185,15 @@ export default (...plugins) => {
             // clean up properly
             const mutationHandler = (mutations, observer) => {
                 const removedNodes = (mutations[0] || {}).removedNodes || [];
-                if (!removedNodes[0] === this.$el) return;
+                const removedNode = removedNodes[0];
+                if (!removedNode || !removedNode.contains(this.$el)) return;
                 observer.disconnect();
                 detached.call(this);
             }
 
             // start observing parent element for changes to the DOM
             const observer = new MutationObserver(mutationHandler);
-            observer.observe(this.$parent.$el, { childList: true })
+            observer.observe(document.documentElement, { childList: true, subtree: true });
         },
 
         // called when the component root node has been detached

dist/vue-filepond.js

@@ -1,5 +1,5 @@
 /*!
- * vue-filepond v5.1.2
+ * vue-filepond v5.1.3
  * A handy FilePond adapter component for Vue
  * 
  * Copyright (c) 2019 PQINA
@@ -193,14 +193,15 @@
                 // clean up properly
                 var mutationHandler = function mutationHandler(mutations, observer) {
                     var removedNodes = (mutations[0] || {}).removedNodes || [];
-                    if (!removedNodes[0] === _this2.$el) return;
+                    var removedNode = removedNodes[0];
+                    if (!removedNode || !removedNode.contains(_this2.$el)) return;
                     observer.disconnect();
                     detached.call(_this2);
                 };
 
                 // start observing parent element for changes to the DOM
                 var observer = new MutationObserver(mutationHandler);
-                observer.observe(this.$parent.$el, { childList: true });
+                observer.observe(document.documentElement, { childList: true, subtree: true });
             },
 
 

dist/vue-filepond.min.js

@@ -175,14 +175,15 @@ export default (...plugins) => {
             // clean up properly
             const mutationHandler = (mutations, observer) => {
                 const removedNodes = (mutations[0] || {}).removedNodes || [];
-                if (!removedNodes[0] === this.$el) return;
+                const removedNode = removedNodes[0];
+                if (!removedNode || !removedNode.contains(this.$el)) return;
                 observer.disconnect();
                 detached.call(this);
             }
 
             // start observing parent element for changes to the DOM
             const observer = new MutationObserver(mutationHandler);
-            observer.observe(this.$parent.$el, { childList: true })
+            observer.observe(document.documentElement, { childList: true, subtree: true });
         },
 
         // called when the component root node has been detached

lib/index.js

@@ -1,6 +1,6 @@
 {
     "name": "vue-filepond",
-    "version": "5.1.2",
+    "version": "5.1.3",
     "description": "A handy FilePond adapter component for Vue",
     "homepage": "https://pqina.nl/filepond",
     "license": "MIT",