fix(runtime-dom): should not coerce nullish values to empty strings for non-string...

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

diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts
index ce30f91162f02958f4c9c51838e11a465a582332..fc5fdde057c4803004b07504c090cdc8f835fb2c 100644 (file)
--- a/packages/runtime-dom/__tests__/patchProps.spec.ts
+++ b/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)
+  })
 })

diff --git a/packages/runtime-dom/src/modules/props.ts b/packages/runtime-dom/src/modules/props.ts
index 0b36578eb88be0f0d4db8d1b0dc9a8159e393bb6..4a9b34c526ebdd1e7ee473866f9295138e9231fd 100644 (file)
--- a/packages/runtime-dom/src/modules/props.ts
+++ b/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
   }
 }