Fix portal children ordering (#4573)

compat/src/portals.js

@@ -40,13 +40,14 @@ function Portal(props) {
 			parentNode: container,
 			childNodes: [],
 			contains: () => true,
+			// Technically this isn't needed
 			appendChild(child) {
 				this.childNodes.push(child);
 				_this._container.appendChild(child);
 			},
 			insertBefore(child, before) {
 				this.childNodes.push(child);
-				_this._container.appendChild(child);
+				_this._container.insertBefore(child, before);
 			},
 			removeChild(child) {
 				this.childNodes.splice(this.childNodes.indexOf(child) >>> 1, 1);

compat/test/browser/portals.test.js

@@ -4,7 +4,8 @@ import React, {
 	createPortal,
 	useState,
 	Component,
-	useEffect
+	useEffect,
+	Fragment
 } from 'preact/compat';
 import { setupScratch, teardown } from '../../../test/_util/helpers';
 import { setupRerender, act } from 'preact/test-utils';
@@ -64,6 +65,35 @@ describe('Portal', () => {
 		expect(scratch.innerHTML).to.equal('<div><p>Hello</p></div>');
 	});
 
+	it('should order portal children well', () => {
+		let bump;
+
+		function Modal() {
+			const [state, setState] = useState(0);
+			bump = () => setState(() => 1);
+
+			return (
+				<Fragment>
+					{state === 1 && <div>top</div>}
+					<div>middle</div>
+					<div>bottom</div>
+				</Fragment>
+			);
+		}
+
+		function Foo(props) {
+			return createPortal(<Modal />, scratch);
+		}
+		render(<Foo />, scratch);
+		expect(scratch.innerHTML).to.equal('<div>middle</div><div>bottom</div>');
+
+		bump();
+		rerender();
+		expect(scratch.innerHTML).to.equal(
+			'<div>top</div><div>middle</div><div>bottom</div>'
+		);
+	});
+
 	it('should toggle the portal', () => {
 		let toggle;