[Fiber] Support moveBefore at the top level of a container (#32036)
Parity with appendChild and insertBefore. This allows reordering at the root while preserving state.
Sebastian Markbåge committed
Jan 9, 2025 at 16:37 UTC
056073de4c50b65807cd77ae6715c9ea8ee64277
1 file changed
+24
-4
packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+24
-4
@@ -793,10 +793,20 @@ export function appendChildToContainer(
793
let parentNode;
794
if (container.nodeType === COMMENT_NODE) {
795
parentNode = (container.parentNode: any);
796
- parentNode.insertBefore(child, container);
796
+ if (supportsMoveBefore) {
797
+ // $FlowFixMe[prop-missing]: We've checked this with supportsMoveBefore.
798
+ parentNode.moveBefore(child, container);
799
+ } else {
800
+ parentNode.insertBefore(child, container);
801
+ }
802
} else {
803
parentNode = container;
799
- parentNode.appendChild(child);
804
+ if (supportsMoveBefore) {
805
+ // $FlowFixMe[prop-missing]: We've checked this with supportsMoveBefore.
806
+ parentNode.moveBefore(child, null);
807
+ } else {
808
+ parentNode.appendChild(child);
809
+ }
810
}
811
// This container might be used for a portal.
812
// If something inside a portal is clicked, that click should bubble
@@ -835,9 +845,19 @@ export function insertInContainerBefore(
845
beforeChild: Instance | TextInstance | SuspenseInstance,
846
): void {
847
if (container.nodeType === COMMENT_NODE) {
838
- (container.parentNode: any).insertBefore(child, beforeChild);
848
+ if (supportsMoveBefore) {
849
+ // $FlowFixMe[prop-missing]: We've checked this with supportsMoveBefore.
850
+ (container.parentNode: any).moveBefore(child, beforeChild);
851
+ } else {
852
+ (container.parentNode: any).insertBefore(child, beforeChild);
853
+ }
854
} else {
840
- container.insertBefore(child, beforeChild);
855
+ if (supportsMoveBefore) {
856
+ // $FlowFixMe[prop-missing]: We've checked this with supportsMoveBefore.
857
+ container.moveBefore(child, beforeChild);
858
+ } else {
859
+ container.insertBefore(child, beforeChild);
860
+ }
861
}
862
}
863