Fix https://github.com/LinusBorg/vue-simple-portal/issues/42

demo/App.vue

@@ -3,6 +3,9 @@
     <h1>Demo App for VueSimplePortal</h1>
     <nav class="nav">
       <router-link to="/" exact>Base</router-link>
+      <router-link to="/condition" exact>
+        Base With condition component inside portal
+      </router-link>
       <router-link to="/disable">Disable</router-link>
       <router-link to="/transition">Transition</router-link>
       <router-link to="/multiple">Multiple</router-link>

demo/components/Condition.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h1>Component with condition prop</h1>
+    <button id="toggle-button" @click="active = !active">
+      Toggle test component
+    </button>
+    <portal>
+      <Test :active="active" />
+    </portal>
+  </div>
+</template>
+
+<script>
+import Test from './TestComponentProp'
+export default {
+  name: 'Base',
+  data() {
+    return {
+      active: false,
+    }
+  },
+  components: {
+    Test,
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

demo/components/TestComponentProp.vue

@@ -0,0 +1,16 @@
+<template>
+  <div v-if="active">
+    <h3 data-test="test-header">This is just a Test Component</h3>
+    <p>
+      Its purpose is to check the behaviour of components inside of the Simple
+      Portal which shown by prop
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TestComponent',
+  props: ['active'],
+}
+</script>

src/components/TargetContainer.js

@@ -18,7 +18,7 @@ export default Vue.extend({
       : h(this.tag || 'DIV', nodes)
   },
   destroyed() {
-    const { $el: el } = this
+    const el = this.$el.parentNode ? this.$el : this.updatedNodes()[0].elm
     el.parentNode.removeChild(el)
   },
 })

tests/e2e/specs/test.js

@@ -47,6 +47,19 @@ describe('My First Test', () => {
         expect(this.el).to.not.have.descendants('[data-test="test-header"]')
       })
   })
+  it('correct destroy component inside portal with condition prop', function() {
+    cy.visit('/condition')
+    cy.portalTarget()
+      .as('el')
+      .then(el => {
+        expect(el).to.not.be.undefined
+
+        cy.get('#toggle-button').click()
+        return cy.wait(500)
+      })
+    cy.visit('/')
+    expect(this.el).to.not.have.descendants('[data-test="test-header"]')
+  })
   it('works with multiple portals sending content', function() {
     cy.visit('/multiple')
     cy.portalTarget()