fix(templateRef): handling template ref on vdom child with insertion state (#14243)

edison1105 · web-flow · commit cc872d618083 · 2025-12-25T21:21:26.000+08:00
close #14242
diff --git a/packages/runtime-vapor/__tests__/dom/templateRef.spec.ts b/packages/runtime-vapor/__tests__/dom/templateRef.spec.ts
@@ -1057,6 +1057,54 @@ describe('interop: template ref', () => {
     )
   })
 
+  test('vapor app: useTemplateRef with vdom child + insertionState', async () => {
+    const { container } = await testTemplateRefInterop(
+      `<script vapor>
+        import { useTemplateRef } from 'vue'
+        const components = _components;
+        const elRef = useTemplateRef('el')
+        function click() {
+          elRef.value.change()
+        }
+      </script>
+      <template>
+        <div>
+          <button class="btn" @click="click"></button>
+          <components.VDOMChild ref="el"/>
+        </div>
+      </template>`,
+      {
+        VDOMChild: {
+          code: `
+            <script setup>
+              import { ref } from 'vue'
+              const msg = ref('foo')
+              function change(){
+                msg.value = 'bar'
+              }
+              defineExpose({ change })
+            </script>
+            <template><div>{{msg}}</div></template>
+          `,
+          vapor: false,
+        },
+      },
+      undefined,
+      { vapor: true },
+    )
+
+    expect(container.innerHTML).toBe(
+      `<div><button class="btn"></button><div>foo</div></div>`,
+    )
+
+    const btn = container.querySelector('.btn')
+    triggerEvent('click', btn!)
+    await nextTick()
+    expect(container.innerHTML).toBe(
+      `<div><button class="btn"></button><div>bar</div></div>`,
+    )
+  })
+
   test('vapor app: static ref with vdom child', async () => {
     const { container } = await testTemplateRefInterop(
       `<script vapor>
diff --git a/packages/runtime-vapor/src/vdomInterop.ts b/packages/runtime-vapor/src/vdomInterop.ts
@@ -421,6 +421,10 @@ function createVDOMComponent(
       },
       instance as any,
     )
+
+    if (isMounted && rawRef) {
+      vdomSetRef(rawRef, null, null, vnode)
+    }
   }
 
   return frag

Original file line number	Diff line number	Diff line change
`@@ -421,6 +421,10 @@ function createVDOMComponent(`
`421`	`421`	`},`
`422`	`422`	`instance as any,`
`423`	`423`	`)`
	`424`	`+`
	`425`	`+ if (isMounted && rawRef) {`
	`426`	`+ vdomSetRef(rawRef, null, null, vnode)`
	`427`	`+ }`
`424`	`428`	`}`
`425`	`429`
`426`	`430`	`return frag`