Scrollable pane sort stickies (microsoft#4111)

* Make ScrollablePane._sortStickies change elements only when needed * Add change file.
chrismohr · Apr 17, 2018 · 3972d74 · 3972d74
1 parent 9a11232
commit 3972d74
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/common/changes/office-ui-fabric-react/ScrollablePane-sortStickies_2018-02-27-12-25.json b/common/changes/office-ui-fabric-react/ScrollablePane-sortStickies_2018-02-27-12-25.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Make ScrollablePane._sortStickies change elements only when needed.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "s@warmsea.net"
+}
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx
@@ -220,12 +220,23 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}>
       const bOffset = this._calculateOffsetParent(b.root);
       return aOffset - bOffset;
     });
-    while (container.lastChild) {
-      container.removeChild(container.lastChild);
+    // Get number of elements that is already in order.
+    let elementsInOrder = 0;
+    while (elementsInOrder < container.children.length && elementsInOrder < stickyArr.length) {
+      if (container.children[elementsInOrder] === stickyArr[elementsInOrder].content) {
+        ++elementsInOrder;
+      } else {
+        break;
+      }
+    }
+    // Remove elements that is not in order if exist.
+    for (let i = container.children.length - 1; i >= elementsInOrder; --i) {
+      container.removeChild(container.children[i]);
+    }
+    // Append further elements if needed.
+    for (let i = elementsInOrder; i < stickyArr.length; ++i) {
+      container.appendChild(stickyArr[i].content);
     }
-    stickyArr.forEach((sticky) => {
-      container.appendChild(sticky.content);
-    });
   }
 
   private _calculateOffsetParent(ele: HTMLElement): number {