Fall back to insertBefore when the moved node was detached externally

Author: JoviDeCroock

src/diff/children.js

@@ -405,7 +405,7 @@ function insert(parentVNode, oldDom, parentDom, isMounting) {
 			oldDom = getDomSibling(parentVNode);
 		}
 
-		if (HAS_MOVE_BEFORE_SUPPORT && !isMounting) {
+		if (HAS_MOVE_BEFORE_SUPPORT && !isMounting && parentVNode._dom.parentNode) {
 			// @ts-expect-error This isn't added to TypeScript lib.d.ts yet
 			parentDom.moveBefore(parentVNode._dom, oldDom);
 		} else {

test/browser/keys.test.jsx

@@ -1553,4 +1553,34 @@ describe('keys', () => {
 		);
 		expect(scratch.querySelector('ul').textContent).to.equal('123');
 	});
+
+	it('should reorder keyed children after a third party removed one of them', () => {
+		let update;
+		class List extends Component {
+			constructor(props) {
+				super(props);
+				this.state = { order: [1, 2, 3] };
+				update = order => this.setState({ order });
+			}
+			render() {
+				return (
+					<ul>
+						{this.state.order.map(i => (
+							<li key={i}>{i}</li>
+						))}
+					</ul>
+				);
+			}
+		}
+
+		render(<List />, scratch);
+		// e.g. an ad blocker or a drag-and-drop library detaching the node
+		scratch.querySelector('li:nth-child(3)').remove();
+
+		update([3, 1, 2]);
+		rerender();
+		expect(scratch.innerHTML).to.equal(
+			'<ul><li>3</li><li>1</li><li>2</li></ul>'
+		);
+	});
 });