fix: fix parent of multi-nested HOC $el not updating (#12757)

fix #12589
vuejs · Aug 23, 2022 · e0b26c4 · e0b26c4
1 parent 46ca7bc
commit e0b26c4
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/core/instance/lifecycle.ts b/src/core/instance/lifecycle.ts
@@ -83,8 +83,15 @@ export function lifecycleMixin(Vue: typeof Component) {
       vm.$el.__vue__ = vm
     }
     // if parent is an HOC, update its $el as well
-    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
-      vm.$parent.$el = vm.$el
+    let wrapper: Component | undefined = vm
+    while (
+      wrapper &&
+      wrapper.$vnode &&
+      wrapper.$parent &&
+      wrapper.$vnode === wrapper.$parent._vnode
+    ) {
+      wrapper.$parent.$el = wrapper.$el
+      wrapper = wrapper.$parent
     }
     // updated hook is called by the scheduler to ensure that children are
     // updated in a parent's updated hook.

diff --git a/test/unit/modules/vdom/patch/edge-cases.spec.ts b/test/unit/modules/vdom/patch/edge-cases.spec.ts
@@ -257,11 +257,15 @@ describe('vdom patch: edge cases', () => {
 
     expect(vm.$refs.foo.$refs.bar.$el.tagName).toBe('DIV')
     expect(vm.$refs.foo.$refs.bar.$el.className).toBe(`hello`)
+    expect(vm.$el.tagName).toBe('DIV')
+    expect(vm.$el.className).toBe(`hello`)
 
     vm.$refs.foo.$refs.bar.ok = false
     waitForUpdate(() => {
       expect(vm.$refs.foo.$refs.bar.$el.tagName).toBe('SPAN')
       expect(vm.$refs.foo.$refs.bar.$el.className).toBe(`hello`)
+      expect(vm.$el.tagName).toBe('SPAN')
+      expect(vm.$el.className).toBe(`hello`)
     }).then(done)
   })