fix: avoid errors thrown during dom props update

breaking the entire app fix #9459
vuejs · Feb 21, 2019 · 8a80a23 · 8a80a23
1 parent cd3d202
commit 8a80a23
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/src/platforms/web/runtime/modules/dom-props.js b/src/platforms/web/runtime/modules/dom-props.js
@@ -38,7 +38,7 @@ function updateDOMProps (oldVnode: VNodeWithData, vnode: VNodeWithData) {
       }
     }
 
-    if (key === 'value') {
+    if (key === 'value' && elm.tagName !== 'PROGRESS') {
       // store value as _value as well since
       // non-string values will be stringified
       elm._value = cur
@@ -65,7 +65,11 @@ function updateDOMProps (oldVnode: VNodeWithData, vnode: VNodeWithData) {
       // This  #4521 by skipping the unnecesarry `checked` update.
       cur !== oldProps[key]
     ) {
-      elm[key] = cur
+      // some property updates can throw
+      // e.g. `value` on <progress> w/ non-finite value
+      try {
+        elm[key] = cur
+      } catch (e) {}
     }
   }
 }

diff --git a/test/unit/modules/vdom/patch/edge-cases.spec.js b/test/unit/modules/vdom/patch/edge-cases.spec.js
@@ -410,4 +410,26 @@ describe('vdom patch: edge cases', () => {
     expect(vm.$el.textContent).toBe('FooBar')
     expect(inlineHookSpy.calls.count()).toBe(2)
   })
+
+  // #9549
+  it('DOM props set throwing should not break app', done => {
+    const vm = new Vue({
+      data: {
+        n: Infinity
+      },
+      template: `
+        <div>
+          <progress :value="n"/>
+          {{ n }}
+        </div>
+      `
+    }).$mount()
+
+    expect(vm.$el.textContent).toMatch('Infinity')
+    vm.n = 1
+    waitForUpdate(() => {
+      expect(vm.$el.textContent).toMatch('1')
+      expect(vm.$el.textContent).not.toMatch('Infinity')
+    }).then(done)
+  })
 })