fix(runtime-dom): should remove attribute when binding `null` to `value` (#3564)

diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts
index bec0f9ba3426e4823d96b68975f0fbabd3956db1..88080ff92abdb6b582e022528df5302b5725b1bb 100644 (file)
--- 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 01a16a58cba6a400c7944d16186833f7077a459f..f312020e7f3ae6ce94e895699f01fb2703bb7fe6 100644 (file)
--- 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
   }