From 08b60f5d0d5b57fcf3347ef66cbeab472c475a88 Mon Sep 17 00:00:00 2001
From: zhoulixiang <18366276315@163.com>
Date: Fri, 12 Jan 2024 17:50:26 +0800
Subject: [PATCH] fix(hydration): improve mismatch when client valut is null or
 undefined (#10086)

---
 packages/runtime-core/__tests__/hydration.spec.ts | 10 ++++++++++
 packages/runtime-core/src/hydration.ts            |  3 +++
 2 files changed, 13 insertions(+)

diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 3b2bdbf35c0..c379485d6aa 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -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()
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index 8ac4fbb75f7..4970aee62bd 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -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)