`<Transition appear>` breaks click event listener

[cernymatej]

Vue version

3.3.11

Link to minimal reproduction

https://stackblitz.com/edit/github-sbgmta?file=src%2Fpages%2FHome.vue,src%2Fcomponents%2FFullscreenBackground.vue

Steps to reproduce

It seems that the click event listener on an element inside <Transition appear> isn't being properly handled.
Steps to reproduce:

1. open the reproduction

2. click on the semi-transparent fullscreen div

3. nothing happens even though it should have set its visibility to false

4. remove appear from the <Transition> component in FullscreenBackground.vue

5. repeat the same steps & now the click is properly handled

What is expected?

The click event should be handled the same way as it is handled without appear

What is actually happening?

Most of the time, the click event doesn't fire - though there were times where I got it to fire after clicking for a while 🤷‍♂️

System Info

No response

Any additional comments?

This seems to only be an issue when using Vue SSR. I couldn't reproduce it in client-side Vue.

[LinusBorg]

This bug was introduced as a side-effect of #8859 I would think

/cc @edison1105

It seems that the elements we get from the server-rendered template tag don't get properly hydrated and thus are missing event listeners.

[LinusBorg]

I think that's because we handle the template element after we patched the props?