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

close 10140
This commit is contained in:
Evan You 2024-01-18 11:19:04 +08:00
parent e977c598db
commit d16a2138a3
2 changed files with 14 additions and 7 deletions

View File

@ -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()
})
})
})

View File

@ -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`