From: Evan You <yyx990803@gmail.com>
Date: Wed, 10 Jan 2024 06:14:47 +0000 (+0800)
Subject: fix(hydration): improve attr hydration mismatch check for boolean attrs
X-Git-Tag: v3.4.8~3
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=972facee0d892a1b6d9d4ad1da5da9306ed45c3f;p=thirdparty%2Fvuejs%2Fcore.git

fix(hydration): improve attr hydration mismatch check for boolean attrs

close #10057
close #10060
---

diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 0d7df43f6a..cd0c61982b 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -1489,5 +1489,20 @@ describe('SSR hydration', () => {
       mountWithHydration(`<div id="bar"></div>`, () => h('div', { id: 'foo' }))
       expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(2)
     })
+
+    test('boolean attr handling', () => {
+      mountWithHydration(`<input />`, () => h('input', { readonly: false }))
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+      mountWithHydration(`<input readonly />`, () =>
+        h('input', { readonly: true }),
+      )
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+      mountWithHydration(`<input readonly="readonly" />`, () =>
+        h('input', { readonly: true }),
+      )
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    })
   })
 })
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index e3bd421728..532fecc812 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -754,19 +754,18 @@ function propHasMismatch(
     (el instanceof SVGElement && isKnownSvgAttr(key)) ||
     (el instanceof HTMLElement && (isBooleanAttr(key) || isKnownHtmlAttr(key)))
   ) {
-    // #10000 some attrs such as textarea.value can't be get by `hasAttribute`
-    actual = el.hasAttribute(key)
-      ? el.getAttribute(key)
-      : key in el
-        ? el[key as keyof typeof el]
-        : ''
-    expected = isBooleanAttr(key)
-      ? includeBooleanAttr(clientValue)
-        ? ''
-        : false
-      : clientValue == null
-        ? ''
-        : String(clientValue)
+    if (isBooleanAttr(key)) {
+      actual = el.hasAttribute(key)
+      expected = includeBooleanAttr(clientValue)
+    } else {
+      // #10000 some attrs such as textarea.value can't be get by `hasAttribute`
+      actual = el.hasAttribute(key)
+        ? el.getAttribute(key)
+        : key in el
+          ? el[key as keyof typeof el]
+          : ''
+      expected = clientValue == null ? '' : String(clientValue)
+    }
     if (actual !== expected) {
       mismatchType = `attribute`
       mismatchKey = key