fix(runtime-dom): should patch svg innerHtml

fix #954
vuejs · Apr 13, 2020 · 050042c · 050042c
1 parent ab16a06
commit 050042c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts
@@ -45,6 +45,22 @@ describe('runtime-dom: props patching', () => {
     expect(fn).toHaveBeenCalled()
   })
 
+  // #954
+  test('(svg) innerHTML unmount prev children', () => {
+    const fn = jest.fn()
+    const comp = {
+      render: () => 'foo',
+      unmounted: fn
+    }
+    const root = document.createElement('div')
+    render(h('div', null, [h(comp)]), root)
+    expect(root.innerHTML).toBe(`<div>foo</div>`)
+
+    render(h('svg', { innerHTML: '<g></g>' }), root)
+    expect(root.innerHTML).toBe(`<svg><g></g></svg>`)
+    expect(fn).toHaveBeenCalled()
+  })
+
   test('textContent unmount prev children', () => {
     const fn = jest.fn()
     const comp = {

diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts
@@ -34,10 +34,11 @@ export const patchProp: RendererOptions<Node, Element>['patchProp'] = (
           patchEvent(el, key, prevValue, nextValue, parentComponent)
         }
       } else if (
-        !isSVG &&
-        key in el &&
-        // onclick="foo" needs to be set as an attribute to work
-        !(nativeOnRE.test(key) && isString(nextValue))
+        (!isSVG &&
+          key in el &&
+          // onclick="foo" needs to be set as an attribute to work
+          !(nativeOnRE.test(key) && isString(nextValue))) ||
+        (isSVG && key === 'innerHTML')
       ) {
         patchDOMProp(
           el,