The page order doesn't work as expected in page setting page (appsmit…

…horg#13448)
ganganimaulik · May 11, 2022 · 3923204 · 3923204
1 parent 0571f9c
commit 3923204
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/app/client/src/components/ads/DraggableList.tsx b/app/client/src/components/ads/DraggableList.tsx
@@ -66,6 +66,7 @@ function DraggableList(props: any) {
     itemHeight,
     ItemRenderer,
     items,
+    keyAccessor,
     onUpdate,
     updateDragging,
   } = props;
@@ -236,7 +237,9 @@ function DraggableList(props: any) {
           <animated.div
             {...bind(i)}
             data-rbd-draggable-id={items[i].id}
-            key={items[i].id}
+            //having a key of items[i].id will break in few places,
+            //eg, primary columns in propertyPane of Table widget
+            key={items[i][keyAccessor] || i}
             style={{
               zIndex,
               width: "100%",

diff --git a/app/client/src/pages/Editor/PagesEditor/index.tsx b/app/client/src/pages/Editor/PagesEditor/index.tsx
@@ -163,6 +163,7 @@ function PagesEditor() {
         ItemRenderer={draggableListRenderItem}
         itemHeight={70}
         items={pages}
+        keyAccessor={"pageId"}
         onUpdate={(newOrder: any, originalIndex: number, newIndex: number) => {
           setPageOrderCallback(pages[originalIndex].pageId, newIndex);
         }}