fix(hydration): handle appear transition before patch props

packages/runtime-core/__tests__/hydration.spec.ts

@@ -1114,6 +1114,41 @@ describe('SSR hydration', () => {
     expect(`mismatch`).not.toHaveBeenWarned()
   })
 
+  test('transition appear w/ event listener', async () => {
+    const container = document.createElement('div')
+    container.innerHTML = `<template><button>0</button></template>`
+    createSSRApp({
+      data() {
+        return {
+          count: 0
+        }
+      },
+      template: `
+        <Transition appear>
+          <button @click="count++">{{count}}</button>
+        </Transition>
+      `
+    }).mount(container)
+
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <button
+        class="v-enter-from v-enter-active"
+      >
+        0
+      </button>
+    `)
+
+    triggerEvent('click', container.querySelector('button')!)
+    await nextTick()
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <button
+        class="v-enter-from v-enter-active"
+      >
+        1
+      </button>
+    `)
+  })
+
   describe('mismatch handling', () => {
     test('text node', () => {
       const { container } = mountWithHydration(`foo`, () => 'bar')

packages/runtime-core/src/hydration.ts

@@ -344,6 +344,29 @@ export function createHydrationFunctions(
       if (dirs) {
         invokeDirectiveHook(vnode, null, parentComponent, 'created')
       }
+
+      // handle appear transition
+      // this should be before patch props because el will be replaced
+      let needCallTransitionHooks = false
+      if (isTemplateNode(el)) {
+        needCallTransitionHooks =
+          needTransition(parentSuspense, transition) &&
+          parentComponent &&
+          parentComponent.vnode.props &&
+          parentComponent.vnode.props.appear
+
+        const content = (el as HTMLTemplateElement).content
+          .firstChild as Element
+
+        if (needCallTransitionHooks) {
+          transition!.beforeEnter(content)
+        }
+
+        // replace <template> node with inner children
+        replaceNode(content, el, parentComponent)
+        vnode.el = el = content
+      }
+
       // props
       if (props) {
         if (
@@ -390,27 +413,6 @@ export function createHydrationFunctions(
         invokeVNodeHook(vnodeHooks, parentComponent, vnode)
       }
 
-      // handle appear transition
-      let needCallTransitionHooks = false
-      if (isTemplateNode(el)) {
-        needCallTransitionHooks =
-          needTransition(parentSuspense, transition) &&
-          parentComponent &&
-          parentComponent.vnode.props &&
-          parentComponent.vnode.props.appear
-
-        const content = (el as HTMLTemplateElement).content
-          .firstChild as Element
-
-        if (needCallTransitionHooks) {
-          transition!.beforeEnter(content)
-        }
-
-        // replace <template> node with inner children
-        replaceNode(content, el, parentComponent)
-        vnode.el = el = content
-      }
-
       if (dirs) {
         invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount')
       }