fix(hydration): properly hydrate indeterminate prop

close #7476
This commit is contained in:
Evan You 2023-11-10 12:04:22 +08:00
parent 0e1e8f919e
commit 34b5a5da4a
2 changed files with 20 additions and 4 deletions

View File

@ -953,6 +953,20 @@ describe('SSR hydration', () => {
expect((container.firstChild as any)._trueValue).toBe(true) expect((container.firstChild as any)._trueValue).toBe(true)
}) })
test('force hydrate checkbox with indeterminate', () => {
const { container } = mountWithHydration(
'<input type="checkbox" indeterminate>',
() =>
createVNode(
'input',
{ type: 'checkbox', indeterminate: '' },
null,
PatchFlags.HOISTED
)
)
expect((container.firstChild as any).indeterminate).toBe(true)
})
test('force hydrate select option with non-string value bindings', () => { test('force hydrate select option with non-string value bindings', () => {
const { container } = mountWithHydration( const { container } = mountWithHydration(
'<select><option :value="true">ok</option></select>', '<select><option :value="true">ok</option></select>',

View File

@ -321,23 +321,25 @@ export function createHydrationFunctions(
const { type, props, patchFlag, shapeFlag, dirs, transition } = vnode const { type, props, patchFlag, shapeFlag, dirs, transition } = vnode
// #4006 for form elements with non-string v-model value bindings // #4006 for form elements with non-string v-model value bindings
// e.g. <option :value="obj">, <input type="checkbox" :true-value="1"> // e.g. <option :value="obj">, <input type="checkbox" :true-value="1">
const forcePatchValue = (type === 'input' && dirs) || type === 'option' // #7476 <input indeterminate>
const forcePatch = type === 'input' || type === 'option'
// skip props & children if this is hoisted static nodes // skip props & children if this is hoisted static nodes
// #5405 in dev, always hydrate children for HMR // #5405 in dev, always hydrate children for HMR
if (__DEV__ || forcePatchValue || patchFlag !== PatchFlags.HOISTED) { if (__DEV__ || forcePatch || patchFlag !== PatchFlags.HOISTED) {
if (dirs) { if (dirs) {
invokeDirectiveHook(vnode, null, parentComponent, 'created') invokeDirectiveHook(vnode, null, parentComponent, 'created')
} }
// props // props
if (props) { if (props) {
if ( if (
forcePatchValue || forcePatch ||
!optimized || !optimized ||
patchFlag & (PatchFlags.FULL_PROPS | PatchFlags.HYDRATE_EVENTS) patchFlag & (PatchFlags.FULL_PROPS | PatchFlags.HYDRATE_EVENTS)
) { ) {
for (const key in props) { for (const key in props) {
if ( if (
(forcePatchValue && key.endsWith('value')) || (forcePatch &&
(key.endsWith('value') || key === 'indeterminate')) ||
(isOn(key) && !isReservedProp(key)) (isOn(key) && !isReservedProp(key))
) { ) {
patchProp( patchProp(