fix(hydration): fix incorect mismatch warning for option with non-string value and...

close 10140

diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index c379485d6aa11e37ca43b74f29624692d9549ccb..127c0d88c7f8d4411cc9c454b7eccbff7675f605 100644 (file)
--- 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
index 4970aee62bdc68babd6b940a1b80d5b72ad65bf1..2953778a0fdcd02f68ad1c511bf95012fde83139 100644 (file)
--- 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`