fix(v-model): preserve remaining text input types before hydration

Author: lazerg

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

@@ -1710,6 +1710,57 @@ describe('SSR hydration', () => {
     expect(state.text).toBe('user value')
   })
 
+  test.each(['search', 'tel', 'password', 'email', 'url'] as const)(
+    'preserves text entered before v-model hydration on type="%s"',
+    async type => {
+      const state = reactive({ text: 'server value' })
+      const App = {
+        setup: () => state,
+        template: `<input type="${type}" v-model="text">`,
+      }
+      const container = document.createElement('div')
+      container.innerHTML = await renderToString(h(App))
+      const input = container.firstChild as HTMLInputElement
+      input.value = 'user value'
+
+      createSSRApp(App).mount(container)
+      await nextTick()
+
+      expect(input.value).toBe('user value')
+      expect(state.text).toBe('user value')
+    },
+  )
+
+  test('keeps bound value when a url input only differs by whitespace', async () => {
+    const state = reactive({ text: ' https://server.com ' })
+    const App = {
+      setup: () => state,
+      template: `<input type="url" v-model="text">`,
+    }
+    const container = document.createElement('div')
+    container.innerHTML = await renderToString(h(App))
+
+    createSSRApp(App).mount(container)
+    await nextTick()
+
+    expect(state.text).toBe(' https://server.com ')
+  })
+
+  test('keeps bound value when a multiple email input only differs by whitespace', async () => {
+    const state = reactive({ text: ' a@b.com , c@d.com ' })
+    const App = {
+      setup: () => state,
+      template: `<input type="email" multiple v-model="text">`,
+    }
+    const container = document.createElement('div')
+    container.innerHTML = await renderToString(h(App))
+
+    createSSRApp(App).mount(container)
+    await nextTick()
+
+    expect(state.text).toBe(' a@b.com , c@d.com ')
+  })
+
   test('force hydrate checkbox with indeterminate', () => {
     const { container } = mountWithHydration(
       '<input type="checkbox" indeterminate>',

packages/runtime-dom/src/directives/vModel.ts

@@ -56,6 +56,35 @@ function castValue(value: string, trim?: boolean, number?: boolean | null) {
   return value
 }
 
+const stripASCIIWhitespace = (value: string) =>
+  value.replace(/^[\t\n\f\r ]+|[\t\n\f\r ]+$/g, '')
+
+// Returns what the browser exposes as `value` for the server-rendered
+// `defaultValue`, or undefined for types whose value sanitization algorithm
+// rewrites the value in ways `defaultValue` cannot be compared against
+// (number, date, color, range...).
+// https://html.spec.whatwg.org/multipage/input.html#value-sanitization-algorithm
+function sanitizeDefaultValue(
+  el: HTMLInputElement | HTMLTextAreaElement,
+): string | undefined {
+  const value = el.defaultValue
+  switch (el.type) {
+    case 'textarea':
+      return value.replace(/\r\n?/g, '\n')
+    case 'text':
+    case 'search':
+    case 'tel':
+    case 'password':
+      return value.replace(/[\r\n]/g, '')
+    case 'url':
+      return stripASCIIWhitespace(value.replace(/[\r\n]/g, ''))
+    case 'email':
+      return (el as HTMLInputElement).multiple
+        ? value.split(',').map(stripASCIIWhitespace).join(',')
+        : stripASCIIWhitespace(value.replace(/[\r\n]/g, ''))
+  }
+}
+
 // We are exporting the v-model runtime directly as vnode hooks so that it can
 // be tree-shaken in case v-model is never used.
 export const vModelText: ModelDirective<
@@ -65,13 +94,7 @@ export const vModelText: ModelDirective<
   created(el, { modifiers: { lazy, trim, number } }, vnode) {
     // During hydration, created runs on an element already in the DOM.
     if (el.parentNode) {
-      if (el.type === 'text') {
-        // Text inputs strip CR/LF from value, while defaultValue retains them.
-        el[initialValueKey] = el.defaultValue.replace(/[\r\n]/g, '')
-      } else if (el.type === 'textarea') {
-        // Textareas normalize CRLF/CR to LF in value.
-        el[initialValueKey] = el.defaultValue.replace(/\r\n?/g, '\n')
-      }
+      el[initialValueKey] = sanitizeDefaultValue(el)
     }
     el[assignKey] = getModelAssigner(vnode)
     const castToNumber =
@@ -100,11 +123,7 @@ export const vModelText: ModelDirective<
     const newValue = value == null ? '' : value
     const initialValue = el[initialValueKey]
     delete el[initialValueKey]
-    if (
-      initialValue !== undefined &&
-      (el.type === 'text' || el.type === 'textarea') &&
-      el.value !== initialValue
-    ) {
+    if (initialValue !== undefined && el.value !== initialValue) {
       el[assignKey](castValue(el.value, trim, number))
     } else {
       el.value = newValue