Skip to content

Commit

Permalink
fix(hydration): improve mismatch when client valut is null or undefin…
Browse files Browse the repository at this point in the history
…ed (vuejs#10086)
  • Loading branch information
zh-lx authored Jan 12, 2024
1 parent bb6b7a2 commit 08b60f5
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 0 deletions.
10 changes: 10 additions & 0 deletions packages/runtime-core/__tests__/hydration.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1512,6 +1512,16 @@ describe('SSR hydration', () => {
expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
})

test('client value is null or undefined', () => {
mountWithHydration(`<div></div>`, () =>
h('div', { draggable: undefined }),
)
expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()

mountWithHydration(`<input />`, () => h('input', { type: null }))
expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
})

test('should not warn against object values', () => {
mountWithHydration(`<input />`, () => h('input', { from: {} }))
expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
Expand Down
3 changes: 3 additions & 0 deletions packages/runtime-core/src/hydration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -758,6 +758,9 @@ function propHasMismatch(
if (isBooleanAttr(key)) {
actual = el.hasAttribute(key)
expected = includeBooleanAttr(clientValue)
} else if (clientValue == null) {
actual = el.hasAttribute(key)
expected = false
} else {
if (el.hasAttribute(key)) {
actual = el.getAttribute(key)
Expand Down

0 comments on commit 08b60f5

Please sign in to comment.