[3.0.0-beta.0] transition-group transitions every element instead of just the one added/removed

[thomasaull]

Codesandbox with reproduction: https://codesandbox.io/s/portal-vue-transition-group-bug-jx0sf6?file=/src/App.vue

I created a <transition-group as per the documentation for next: https://next.portal-vue.linusb.org/guide/advanced.html#portaltarget-transitions

Clicking on close on one of the notifications causes a transition for every notification in the list instead of just the one which should be removed. Looks like a bug? Or am I doing anything wrong?

[thomasaull]

I did some more digging, and the issue seems to occur only, when I use Vue components as elements to transition.

This works:

<portal to="notifications" name="notifications">
  <div>Notification 01</div>

  <div v-if="isNotification02Visible">
    Notification 02
  </div>

  <div>>Notification 03</div>
</portal>

<button @click="isNotification02Visible = !isNotification02Visible">toggle</button>

This does not work:

<portal to="notifications" name="notifications">
  <Notification
    title="Notification 01"
  />

  <Notification
    v-if="isNotification02Visible"
    title="Notification 02"
    @close="isNotification02Visible = false"
  />

  <Notification
    title="Notification 03"
  />
</portal>

[LinusBorg]

FWIW as a 2-year late answer: the list items need stable keys. using the node is the wrong approach. giving the components keys in the portal and using them via node.key in the portal-target works, though.

[thomasaull]

@LinusBorg Thanks for your reply and help. Doing it the way you've described it works :)

I forked the codesandbox with a working example: https://codesandbox.io/s/portal-vue-transition-group-bug-forked-3rejfl?file=/src/App.vue for anyone finding this issue (which will probably be me in a couple of months :D)