fix(v-model): preserve pre-hydration user input across native controls

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

@@ -1551,6 +1551,121 @@ describe('SSR hydration', () => {
     expect((container.firstChild as any)._trueValue).toBe(true)
   })
 
+  test('preserves pre-hydration user input value for text v-model', async () => {
+    const App = {
+      data() {
+        return {
+          text: 'test value',
+        }
+      },
+      template: `<div><input v-model="text"><span class="text">{{ text }}</span></div>`,
+    }
+
+    const container = document.createElement('div')
+    container.innerHTML = await renderToString(h(App))
+
+    const input = container.querySelector('input') as HTMLInputElement
+    input.value = 'edited before hydration'
+
+    createSSRApp(App).mount(container)
+
+    expect((container.querySelector('input') as HTMLInputElement).value).toBe(
+      'edited before hydration',
+    )
+    await nextTick()
+    expect(container.querySelector('.text')!.textContent).toBe(
+      'edited before hydration',
+    )
+  })
+
+  test('preserves pre-hydration checkbox v-model state', async () => {
+    const App = {
+      data() {
+        return {
+          checked: false,
+        }
+      },
+      template: `<div><input type="checkbox" v-model="checked"><span class="checked">{{ checked }}</span></div>`,
+    }
+
+    const container = document.createElement('div')
+    container.innerHTML = await renderToString(h(App))
+
+    const input = container.querySelector('input') as HTMLInputElement
+    input.checked = true
+
+    createSSRApp(App).mount(container)
+
+    expect((container.querySelector('input') as HTMLInputElement).checked).toBe(
+      true,
+    )
+    await nextTick()
+    expect(container.querySelector('.checked')!.textContent).toBe('true')
+  })
+
+  test('preserves pre-hydration radio v-model state', async () => {
+    const App = {
+      data() {
+        return {
+          picked: 'a',
+        }
+      },
+      template: `<div>
+        <input type="radio" value="a" v-model="picked">
+        <input type="radio" value="b" v-model="picked">
+        <span class="picked">{{ picked }}</span>
+      </div>`,
+    }
+
+    const container = document.createElement('div')
+    container.innerHTML = await renderToString(h(App))
+
+    const radios = container.querySelectorAll<HTMLInputElement>('input')
+    const a = radios[0]!
+    const b = radios[1]!
+    a.checked = false
+    b.checked = true
+
+    createSSRApp(App).mount(container)
+
+    expect(
+      container.querySelectorAll<HTMLInputElement>('input')[1].checked,
+    ).toBe(true)
+    await nextTick()
+    expect(container.querySelector('.picked')!.textContent).toBe('b')
+  })
+
+  test('preserves pre-hydration select v-model value', async () => {
+    const App = {
+      data() {
+        return {
+          selected: 'a',
+        }
+      },
+      template: `<div>
+        <select v-model="selected">
+          <option value="a">A</option>
+          <option value="b">B</option>
+        </select>
+        <span class="selected">{{ selected }}</span>
+      </div>`,
+    }
+
+    const container = document.createElement('div')
+    container.innerHTML = await renderToString(h(App))
+
+    const select = container.querySelector('select') as HTMLSelectElement
+    select.selectedIndex = 1
+
+    createSSRApp(App).mount(container)
+
+    expect((container.querySelector('select') as HTMLSelectElement).value).toBe(
+      'b',
+    )
+    await nextTick()
+    expect(container.querySelector('.selected')!.textContent).toBe('b')
+  })
+
   test('force hydrate checkbox with indeterminate', () => {
     const { container } = mountWithHydration(
       '<input type="checkbox" indeterminate>',

packages/runtime-core/src/directives.ts

@@ -49,6 +49,7 @@ export type DirectiveHook<
   binding: DirectiveBinding<Value, Modifiers, Arg>,
   vnode: VNode<any, HostElement>,
   prevVNode: Prev,
+  isHydrating?: boolean,
 ) => void
 
 export type SSRDirectiveHook<
@@ -172,6 +173,7 @@ export function invokeDirectiveHook(
   prevVNode: VNode | null,
   instance: ComponentInternalInstance | null,
   name: keyof ObjectDirective,
+  isHydrating = false,
 ): void {
   const bindings = vnode.dirs!
   const oldBindings = prevVNode && prevVNode.dirs!
@@ -193,6 +195,7 @@ export function invokeDirectiveHook(
         binding,
         vnode,
         prevVNode,
+        isHydrating,
       ])
       resetTracking()
     }

packages/runtime-core/src/hydration.ts

@@ -383,7 +383,7 @@ export function createHydrationFunctions(
     // #5405 in dev, always hydrate children for HMR
     if (__DEV__ || forcePatch || patchFlag !== PatchFlags.CACHED) {
       if (dirs) {
-        invokeDirectiveHook(vnode, null, parentComponent, 'created')
+        invokeDirectiveHook(vnode, null, parentComponent, 'created', true)
       }
 
       // handle appear transition
@@ -537,7 +537,7 @@ export function createHydrationFunctions(
         invokeVNodeHook(vnodeHooks, parentComponent, vnode)
       }
       if (dirs) {
-        invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount')
+        invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount', true)
       }
       if (
         (vnodeHooks = props && props.onVnodeMounted) ||
@@ -547,7 +547,8 @@ export function createHydrationFunctions(
         queueEffectWithSuspense(() => {
           vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode)
           needCallTransitionHooks && transition!.enter(el)
-          dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted')
+          dirs &&
+            invokeDirectiveHook(vnode, null, parentComponent, 'mounted', true)
         }, parentSuspense)
       }
     }