Skip to content

Commit 8084156

Browse files
committed
fix(runtime-core): mount children before setting element props
fix #1318, close #1320
1 parent aac9b03 commit 8084156

File tree

2 files changed

+23
-20
lines changed

2 files changed

+23
-20
lines changed

packages/runtime-core/src/renderer.ts

+17-14
Original file line numberDiff line numberDiff line change
@@ -672,6 +672,23 @@ function baseCreateRenderer(
672672
isSVG,
673673
props && props.is
674674
)
675+
676+
// mount children first, since some props may rely on child content
677+
// being already rendered, e.g. `<select value>`
678+
if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
679+
hostSetElementText(el, vnode.children as string)
680+
} else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
681+
mountChildren(
682+
vnode.children as VNodeArrayChildren,
683+
el,
684+
null,
685+
parentComponent,
686+
parentSuspense,
687+
isSVG && type !== 'foreignObject',
688+
optimized || !!vnode.dynamicChildren
689+
)
690+
}
691+
675692
// props
676693
if (props) {
677694
for (const key in props) {
@@ -707,20 +724,6 @@ function baseCreateRenderer(
707724
hostSetScopeId(el, treeOwnerId + '-s')
708725
}
709726

710-
// children
711-
if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
712-
hostSetElementText(el, vnode.children as string)
713-
} else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
714-
mountChildren(
715-
vnode.children as VNodeArrayChildren,
716-
el,
717-
null,
718-
parentComponent,
719-
parentSuspense,
720-
isSVG && type !== 'foreignObject',
721-
optimized || !!vnode.dynamicChildren
722-
)
723-
}
724727
if (transition && !transition.persisted) {
725728
transition.beforeEnter(el)
726729
}

packages/runtime-test/__tests__/testRuntime.spec.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -77,19 +77,19 @@ describe('test renderer', () => {
7777
})
7878

7979
expect(ops[1]).toEqual({
80+
type: NodeOpTypes.SET_ELEMENT_TEXT,
81+
text: 'hello',
82+
targetNode: root.children[0]
83+
})
84+
85+
expect(ops[2]).toEqual({
8086
type: NodeOpTypes.PATCH,
8187
targetNode: root.children[0],
8288
propKey: 'id',
8389
propPrevValue: null,
8490
propNextValue: 'test'
8591
})
8692

87-
expect(ops[2]).toEqual({
88-
type: NodeOpTypes.SET_ELEMENT_TEXT,
89-
text: 'hello',
90-
targetNode: root.children[0]
91-
})
92-
9393
expect(ops[3]).toEqual({
9494
type: NodeOpTypes.INSERT,
9595
targetNode: root.children[0],

0 commit comments

Comments
 (0)