fix(hydration): fix incorect mismatch warning for option with non-str…

…ing value and inner text close 10140
vuejs · Jan 18, 2024 · d16a213 · d16a213
1 parent e977c59
commit d16a213
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -1531,5 +1531,12 @@ describe('SSR hydration', () => {
       mountWithHydration(`<button />`, () => h('button', { href: undefined }))
       expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
     })
+
+    test('should not warn on non-renderable option values', () => {
+      mountWithHydration(`<select><option>hello</option></select>`, () =>
+        h('select', [h('option', { value: ['foo'] }, 'hello')]),
+      )
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    })
   })
 })
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
@@ -764,16 +764,16 @@ function propHasMismatch(
     } else {
       if (el.hasAttribute(key)) {
         actual = el.getAttribute(key)
+      } else if (key === 'value' && el.tagName === 'TEXTAREA') {
+        // #10000 textarea.value can't be retrieved by `hasAttribute`
+        actual = (el as HTMLTextAreaElement).value
       } else {
-        // #10000 some attrs such as textarea.value can't be retrieved by `hasAttribute`
-        const serverValue = el[key as keyof typeof el]
-        actual =
-          isObject(serverValue) || serverValue == null
-            ? ''
-            : String(serverValue)
+        actual = false
       }
       expected =
-        isObject(clientValue) || clientValue == null ? '' : String(clientValue)
+        isObject(clientValue) || clientValue == null
+          ? false
+          : String(clientValue)
     }
     if (actual !== expected) {
       mismatchType = `attribute`