Avoid detaching CssLayout children unnecessarily (#9861)

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

Fixes #7712

1 files changed, 15 insertions, 13 deletions

diff --git a/client/src/main/java/com/vaadin/client/ui/csslayout/CssLayoutConnector.java b/client/src/main/java/com/vaadin/client/ui/csslayout/CssLayoutConnector.java
index 40e473c8d8..8b90fffeb6 100644
--- a/client/src/main/java/com/vaadin/client/ui/csslayout/CssLayoutConnector.java
+++ b/client/src/main/java/com/vaadin/client/ui/csslayout/CssLayoutConnector.java
@@ -114,19 +114,6 @@ public class CssLayoutConnector extends AbstractLayoutConnector {
     public void onConnectorHierarchyChange(
             ConnectorHierarchyChangeEvent event) {
         Profiler.enter("CssLayoutConnector.onConnectorHierarchyChange");
-        Profiler.enter(
-                "CssLayoutConnector.onConnectorHierarchyChange add children");
-        int index = 0;
-        for (ComponentConnector child : getChildComponents()) {
-            VCaption childCaption = childIdToCaption
-                    .get(child.getConnectorId());
-            if (childCaption != null) {
-                getWidget().addOrMove(childCaption, index++);
-            }
-            getWidget().addOrMove(child.getWidget(), index++);
-        }
-        Profiler.leave(
-                "CssLayoutConnector.onConnectorHierarchyChange add children");
 
         // Detach old child widgets and possibly their caption
         Profiler.enter(
@@ -145,6 +132,21 @@ public class CssLayoutConnector extends AbstractLayoutConnector {
         }
         Profiler.leave(
                 "CssLayoutConnector.onConnectorHierarchyChange remove old children");
+
+        Profiler.enter(
+                "CssLayoutConnector.onConnectorHierarchyChange add children");
+        int index = 0;
+        for (ComponentConnector child : getChildComponents()) {
+            VCaption childCaption = childIdToCaption
+                    .get(child.getConnectorId());
+            if (childCaption != null) {
+                getWidget().addOrMove(childCaption, index++);
+            }
+            getWidget().addOrMove(child.getWidget(), index++);
+        }
+        Profiler.leave(
+                "CssLayoutConnector.onConnectorHierarchyChange add children");
+
         Profiler.leave("CssLayoutConnector.onConnectorHierarchyChange");
     }