From e3f5dcb99bf42fed48d995438e459203dc3f6ed0 Mon Sep 17 00:00:00 2001
From: GU Yiling <justice360@gmail.com>
Date: Sat, 29 May 2021 03:48:22 +0800
Subject: [PATCH] fix(runtime-dom): should remove attribute when binding `null`
 to `value` (#3564)

---
 packages/runtime-dom/__tests__/patchProps.spec.ts | 14 ++++++++++++++
 packages/runtime-dom/src/modules/props.ts         |  3 +++
 2 files changed, 17 insertions(+)

diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts
index bec0f9ba..88080ff9 100644
--- a/packages/runtime-dom/__tests__/patchProps.spec.ts
+++ b/packages/runtime-dom/__tests__/patchProps.spec.ts
@@ -9,6 +9,7 @@ describe('runtime-dom: props patching', () => {
     // prop with string value should be set to empty string on null values
     patchProp(el, 'id', null, null)
     expect(el.id).toBe('')
+    expect(el.getAttribute('id')).toBe(null)
   })
 
   test('value', () => {
@@ -17,12 +18,25 @@ describe('runtime-dom: props patching', () => {
     expect(el.value).toBe('foo')
     patchProp(el, 'value', null, null)
     expect(el.value).toBe('')
+    expect(el.getAttribute('value')).toBe(null)
     const obj = {}
     patchProp(el, 'value', null, obj)
     expect(el.value).toBe(obj.toString())
     expect((el as any)._value).toBe(obj)
   })
 
+  // For <input type="text">, setting el.value won't create a `value` attribute
+  // so we need to add tests for other elements
+  test('value for non-text input', () => {
+    const el = document.createElement('option')
+    patchProp(el, 'value', null, 'foo')
+    expect(el.value).toBe('foo')
+    patchProp(el, 'value', null, null)
+    expect(el.value).toBe('')
+    // #3475
+    expect(el.getAttribute('value')).toBe(null)
+  })
+
   test('boolean prop', () => {
     const el = document.createElement('select')
     patchProp(el, 'multiple', null, '')
diff --git a/packages/runtime-dom/src/modules/props.ts b/packages/runtime-dom/src/modules/props.ts
index 01a16a58..f312020e 100644
--- a/packages/runtime-dom/src/modules/props.ts
+++ b/packages/runtime-dom/src/modules/props.ts
@@ -33,6 +33,9 @@ export function patchDOMProp(
     if (el.value !== newValue) {
       el.value = newValue
     }
+    if (value == null) {
+      el.removeAttribute('value')
+    }
     return
   }