Avoid detaching VL/HL children unnecessarily (#9862)

When child components are removed from a
VerticalLayout/HorizontalLayout, do not remove other children from the
DOM if no other hierarchy changes are made.

Fixes #7713

1 files changed, 18 insertions, 16 deletions

diff --git a/client/src/main/java/com/vaadin/client/ui/orderedlayout/AbstractOrderedLayoutConnector.java b/client/src/main/java/com/vaadin/client/ui/orderedlayout/AbstractOrderedLayoutConnector.java
index 0e3bf73342..7ec6e5fd10 100644
--- a/client/src/main/java/com/vaadin/client/ui/orderedlayout/AbstractOrderedLayoutConnector.java
+++ b/client/src/main/java/com/vaadin/client/ui/orderedlayout/AbstractOrderedLayoutConnector.java
@@ -320,6 +320,24 @@ public abstract class AbstractOrderedLayoutConnector
         Profiler.leave(
                 "AOLC.onConnectorHierarchyChange temporarily remove spacing");
 
+        // first remove extra components to avoid extra detaches and attaches
+        for (ComponentConnector child : previousChildren) {
+            Profiler.enter("AOLC.onConnectorHierarchyChange remove children");
+            if (child.getParent() != this) {
+                Slot slot = layout.getSlot(child.getWidget());
+                slot.setWidgetResizeListener(null);
+                if (slot.hasCaption()) {
+                    slot.setCaptionResizeListener(null);
+                }
+                slot.setSpacingResizeListener(null);
+                child.removeStateChangeHandler(childStateChangeHandler);
+                layout.removeWidget(child.getWidget());
+            }
+            Profiler.leave("AOLC.onConnectorHierarchyChange remove children");
+        }
+        Profiler.leave("AOLC.onConnectorHierarchyChange");
+
+        // reorder remaining components and add any new components
         for (ComponentConnector child : getChildComponents()) {
             Profiler.enter("AOLC.onConnectorHierarchyChange add children");
             Slot slot = layout.getSlot(child.getWidget());
@@ -345,22 +363,6 @@ public abstract class AbstractOrderedLayoutConnector
         }
         Profiler.leave("AOLC.onConnectorHierarchyChange setSpacing");
 
-        for (ComponentConnector child : previousChildren) {
-            Profiler.enter("AOLC.onConnectorHierarchyChange remove children");
-            if (child.getParent() != this) {
-                Slot slot = layout.getSlot(child.getWidget());
-                slot.setWidgetResizeListener(null);
-                if (slot.hasCaption()) {
-                    slot.setCaptionResizeListener(null);
-                }
-                slot.setSpacingResizeListener(null);
-                child.removeStateChangeHandler(childStateChangeHandler);
-                layout.removeWidget(child.getWidget());
-            }
-            Profiler.leave("AOLC.onConnectorHierarchyChange remove children");
-        }
-        Profiler.leave("AOLC.onConnectorHierarchyChange");
-
         updateInternalState();
     }