fix(runtime-core): mount children before setting element props

fix #1318, close #1320

diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index b306b9f2d726c02fda8cc22f8ec363f61c8d1dc4..d64460ad53ab01a899b2cb9e947a7de030428031 100644 (file)
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -672,6 +672,23 @@ function baseCreateRenderer(
         isSVG,
         props && props.is
       )
+
+      // mount children first, since some props may rely on child content
+      // being already rendered, e.g. `<select value>`
+      if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
+        hostSetElementText(el, vnode.children as string)
+      } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+        mountChildren(
+          vnode.children as VNodeArrayChildren,
+          el,
+          null,
+          parentComponent,
+          parentSuspense,
+          isSVG && type !== 'foreignObject',
+          optimized || !!vnode.dynamicChildren
+        )
+      }
+
       // props
       if (props) {
         for (const key in props) {
@@ -707,20 +724,6 @@ function baseCreateRenderer(
         hostSetScopeId(el, treeOwnerId + '-s')
       }
 
-      // children
-      if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
-        hostSetElementText(el, vnode.children as string)
-      } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
-        mountChildren(
-          vnode.children as VNodeArrayChildren,
-          el,
-          null,
-          parentComponent,
-          parentSuspense,
-          isSVG && type !== 'foreignObject',
-          optimized || !!vnode.dynamicChildren
-        )
-      }
       if (transition && !transition.persisted) {
         transition.beforeEnter(el)
       }

diff --git a/packages/runtime-test/__tests__/testRuntime.spec.ts b/packages/runtime-test/__tests__/testRuntime.spec.ts
index be18d4a00a2e40107dab0a431e5e712656bb6431..8774faffa6f1311df2db7c399466b27381309b9a 100644 (file)
--- a/packages/runtime-test/__tests__/testRuntime.spec.ts
+++ b/packages/runtime-test/__tests__/testRuntime.spec.ts
@@ -77,6 +77,12 @@ describe('test renderer', () => {
     })
 
     expect(ops[1]).toEqual({
+      type: NodeOpTypes.SET_ELEMENT_TEXT,
+      text: 'hello',
+      targetNode: root.children[0]
+    })
+
+    expect(ops[2]).toEqual({
       type: NodeOpTypes.PATCH,
       targetNode: root.children[0],
       propKey: 'id',
@@ -84,12 +90,6 @@ describe('test renderer', () => {
       propNextValue: 'test'
     })
 
-    expect(ops[2]).toEqual({
-      type: NodeOpTypes.SET_ELEMENT_TEXT,
-      text: 'hello',
-      targetNode: root.children[0]
-    })
-
     expect(ops[3]).toEqual({
       type: NodeOpTypes.INSERT,
       targetNode: root.children[0],