fix(runtime-dom): should remove attribute when binding null to `val…

…ue` (#3564)

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, '')

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
   }