Ensure childDomWrapperId is available to insert nodes in the correct order

src/core/vdom.ts

@@ -1220,10 +1220,15 @@ export function renderer(renderer: () => RenderResult): Renderer {
 			const nextSibling = _wrapperSiblingMap.get(searchNode);
 			if (nextSibling) {
 				let domNode = nextSibling.domNode;
-				if ((isWNodeWrapper(nextSibling) || isVirtualWrapper(nextSibling)) && nextSibling.childDomWrapperId) {
-					const childWrapper = _idToWrapperMap.get(nextSibling.childDomWrapperId);
-					if (childWrapper && !isBodyWrapper(childWrapper)) {
-						domNode = childWrapper.domNode;
+				if (isWNodeWrapper(nextSibling) || isVirtualWrapper(nextSibling)) {
+					if (!nextSibling.childDomWrapperId) {
+						nextSibling.childDomWrapperId = findDomNodeOnParentWrapper(nextSibling);
+					}
+					if (nextSibling.childDomWrapperId) {
+						const childWrapper = _idToWrapperMap.get(nextSibling.childDomWrapperId);
+						if (childWrapper && !isBodyWrapper(childWrapper)) {
+							domNode = childWrapper.domNode;
+						}
 					}
 				}
 				if (domNode && domNode.parentNode) {
@@ -2043,16 +2048,14 @@ export function renderer(renderer: () => RenderResult): Renderer {
 		return processResult;
 	}
 
-	function setDomNodeOnParentWrapper(id: string) {
-		let wrapper = _idToWrapperMap.get(id)!;
-		let children = [...(_idToChildrenWrappers.get(id) || [])];
+	function findDomNodeOnParentWrapper(wrapper: DNodeWrapper): string | undefined {
+		let children = [...(_idToChildrenWrappers.get(wrapper.id) || [])];
 		let child: DNodeWrapper | undefined;
 		while (children.length && !wrapper.domNode) {
 			child = children.shift();
 			if (child) {
 				if (child.domNode) {
-					wrapper.childDomWrapperId = child.id;
-					break;
+					return child.id;
 				}
 				let nextChildren = _idToChildrenWrappers.get(child.id);
 				if (nextChildren) {
@@ -2062,6 +2065,13 @@ export function renderer(renderer: () => RenderResult): Renderer {
 		}
 	}
 
+	function setDomNodeOnParentWrapper(id: string) {
+		let wrapper = _idToWrapperMap.get(id);
+		if (wrapper) {
+			wrapper.childDomWrapperId = findDomNodeOnParentWrapper(wrapper);
+		}
+	}
+
 	function _createDom({ next }: CreateDomInstruction): ProcessResult {
 		const parentDomNode = findParentDomNode(next)!;
 		const isVirtual = isVirtualWrapper(next);

tests/core/unit/vdom.tsx

@@ -1499,6 +1499,61 @@ jsdomDescribe('vdom', () => {
 			assert.strictEqual(div.outerHTML, '<div><div><foobar></foobar><baz></baz><qux></qux></div></div>');
 		});
 
+		it('should insert widgets in the correct position when the nested widgets domNode is not initially rendered', () => {
+			const root = document.createElement('div');
+
+			let invalidateApp: any[] = [];
+			let renderA = false;
+			let renderB = false;
+
+			class VirtualFoo extends WidgetBase<{ render: boolean }> {
+				constructor() {
+					super();
+					invalidateApp.push(() => {
+						this.invalidate();
+					});
+				}
+
+				render() {
+					return w(Foo, {
+						key: this.properties.key,
+						render: this.properties.key === 'a' ? renderA : renderB
+					});
+				}
+			}
+
+			class Foo extends WidgetBase<{ render: boolean }> {
+				render() {
+					if (this.properties.render) {
+						return v('div', [`${this.properties.key}`]);
+					}
+					return null;
+				}
+			}
+
+			class App extends WidgetBase {
+				render() {
+					return v('div', [
+						w(VirtualFoo, { key: 'a', render: renderA }),
+						w(VirtualFoo, { key: 'b', render: renderB })
+					]);
+				}
+			}
+
+			const r = renderer(() => w(App, {}));
+			r.mount({ domNode: root });
+			resolvers.resolve();
+			assert.strictEqual(root.innerHTML, '<div></div>');
+			renderB = true;
+			invalidateApp[1]();
+			resolvers.resolve();
+			assert.strictEqual(root.innerHTML, '<div><div>b</div></div>');
+			renderA = true;
+			invalidateApp[0]();
+			resolvers.resolve();
+			assert.strictEqual(root.innerHTML, '<div><div>a</div><div>b</div></div>');
+		});
+
 		it('Should insert result from widget in correct position', () => {
 			class Menu extends WidgetBase {
 				render() {