From ecbcf3f6082acdc07783ecb134e769ea4c7528d8 Mon Sep 17 00:00:00 2001
From: zhoulixiang <18366276315@163.com>
Date: Wed, 10 Jan 2024 04:04:25 +0000
Subject: [PATCH] fix: process some keys for el[key] in hydration mismatch

---
 packages/runtime-core/__tests__/hydration.spec.ts |  5 +++++
 packages/runtime-core/src/hydration.ts            | 14 ++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 0d7df43f6aa..49aa2eb431c 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -1489,5 +1489,10 @@ describe('SSR hydration', () => {
       mountWithHydration(`<div id="bar"></div>`, () => h('div', { id: 'foo' }))
       expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(2)
     })
+
+    test('attr need to be processed mismatch', () => {
+      mountWithHydration(`<input />`, () => h('input', { readonly: false }))
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    })
   })
 })
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index e3bd4217287..a76b3394736 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -755,10 +755,11 @@ function propHasMismatch(
     (el instanceof HTMLElement && (isBooleanAttr(key) || isKnownHtmlAttr(key)))
   ) {
     // #10000 some attrs such as textarea.value can't be get by `hasAttribute`
+    const processedKey = getProcessedKey(key)
     actual = el.hasAttribute(key)
       ? el.getAttribute(key)
-      : key in el
-        ? el[key as keyof typeof el]
+      : processedKey in el
+        ? el[processedKey as keyof typeof el]
         : ''
     expected = isBooleanAttr(key)
       ? includeBooleanAttr(clientValue)
@@ -830,3 +831,12 @@ function isMapEqual(a: Map<string, string>, b: Map<string, string>): boolean {
   }
   return true
 }
+
+// Some keys need to be processed before they can be obtained by el[key]
+// #10057 such as: readonly => readOnly
+function getProcessedKey(key: string) {
+  if (key === 'readonly') {
+    return 'readOnly'
+  }
+  return key
+}