fix(runtime-dom): should not coerce nullish values to empty strings f…

…or non-string dom props

fix #1049
close #1092, close #1093, close #1094

packages/runtime-dom/__tests__/patchProps.spec.ts

@@ -6,6 +6,7 @@ describe('runtime-dom: props patching', () => {
     const el = document.createElement('div')
     patchProp(el, 'id', null, 'foo')
     expect(el.id).toBe('foo')
+    // prop with string value should be set to empty string on null values
     patchProp(el, 'id', null, null)
     expect(el.id).toBe('')
   })
@@ -75,4 +76,20 @@ describe('runtime-dom: props patching', () => {
     expect(root.innerHTML).toBe(`<div>bar</div>`)
     expect(fn).toHaveBeenCalled()
   })
+
+  // #1049
+  test('set value as-is for non string-value props', () => {
+    const el = document.createElement('video')
+    // jsdom doesn't really support video playback. srcObject in a real browser
+    // should default to `null`, but in jsdom it's `undefined`.
+    // anyway, here we just want to make sure Vue doesn't set non-string props
+    // to an empty string on nullish values - it should reset to its default
+    // value.
+    const intiialValue = el.srcObject
+    const fakeObject = {}
+    patchProp(el, 'srcObject', null, fakeObject)
+    expect(el.srcObject).not.toBe(fakeObject)
+    patchProp(el, 'srcObject', null, null)
+    expect(el.srcObject).toBe(intiialValue)
+  })
 })

packages/runtime-dom/src/modules/props.ts

@@ -31,7 +31,10 @@ export function patchDOMProp(
   if (value === '' && typeof el[key] === 'boolean') {
     // e.g. <select multiple> compiles to { multiple: '' }
     el[key] = true
+  } else if (value == null && typeof el[key] === 'string') {
+    // e.g. <div :id="null">
+    el[key] = ''
   } else {
-    el[key] = value == null ? '' : value
+    el[key] = value
   }
 }