From eb92b6d51442c26b7bcc8d57273b3e99712a5f67 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 9 Nov 2023 10:22:35 -0500
Subject: [PATCH 1/2] docs(reorder): add stable identity

---
 docs/api/reorder.md                                         | 6 +++++-
 .../reorder/updating-data/angular/example_component_html.md | 2 +-
 .../reorder/updating-data/angular/example_component_ts.md   | 4 ++++
 static/usage/v7/reorder/updating-data/react.md              | 2 +-
 static/usage/v7/reorder/updating-data/vue.md                | 2 +-
 5 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/docs/api/reorder.md b/docs/api/reorder.md
index 4d7d32f87fc..b40605a7093 100644
--- a/docs/api/reorder.md
+++ b/docs/api/reorder.md
@@ -61,10 +61,14 @@ import Wrapper from '@site/static/usage/v7/reorder/wrapper/index.md';
 
 ## Updating Data
 
-When the `complete` method is called on the reorder group with no parameters, the DOM nodes will be reordered. If the items are rendered from an array of data that needs to be sorted, this can result in the data and DOM being out of sync. In order to sort the array upon completion of the reorder, the array should be passed as a parameter to the `complete` method. The `complete` method will sort the array and return it so it can be reassigned.
+When the `complete` method is called on the reorder group with no parameters, the DOM nodes will be reordered. If the items are rendered from an array of data that needs to be sorted, this can result in the data and DOM being out of sync.
+
+In order to sort the array upon completion of the reorder, the array should be passed as a parameter to the `complete` method. The `complete` method will sort the array and return it so it can be reassigned. Note that passing the array will prevent Ionic from reordering the DOM nodes.
 
 In some cases, it may be necessary for an app to reorder both the array and the DOM nodes on its own. If this is required, `false` should be passed as a parameter to the `complete` method. This will prevent Ionic from reordering any DOM nodes inside of the reorder group.
 
+Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `trackBy` for Angular, and `key` for React and Vue.
+
 import UpdatingData from '@site/static/usage/v7/reorder/updating-data/index.md';
 
 <UpdatingData />
diff --git a/static/usage/v7/reorder/updating-data/angular/example_component_html.md b/static/usage/v7/reorder/updating-data/angular/example_component_html.md
index d21fc522e96..2485a558246 100644
--- a/static/usage/v7/reorder/updating-data/angular/example_component_html.md
+++ b/static/usage/v7/reorder/updating-data/angular/example_component_html.md
@@ -3,7 +3,7 @@
   <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
   <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
   <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
-    <ion-item *ngFor="let item of items">
+    <ion-item *ngFor="let item of items; trackBy: trackItems">
       <ion-label> Item {{ item }} </ion-label>
       <ion-reorder slot="end"></ion-reorder>
     </ion-item>
diff --git a/static/usage/v7/reorder/updating-data/angular/example_component_ts.md b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
index 11e2f59d553..5eb0a0c547e 100644
--- a/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
@@ -23,5 +23,9 @@ export class ExampleComponent {
     // After complete is called the items will be in the new order
     console.log('After complete', this.items);
   }
+  
+  trackItems(index: number, itemNumber: number) {
+    return itemNumber;
+  }
 }
 ```
diff --git a/static/usage/v7/reorder/updating-data/react.md b/static/usage/v7/reorder/updating-data/react.md
index c7ad97d184d..acbf422d017 100644
--- a/static/usage/v7/reorder/updating-data/react.md
+++ b/static/usage/v7/reorder/updating-data/react.md
@@ -24,7 +24,7 @@ function Example() {
       {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
       <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
         {items.map((item) => (
-          <IonItem>
+          <IonItem key={item}>
             <IonLabel>Item {item}</IonLabel>
             <IonReorder slot="end"></IonReorder>
           </IonItem>
diff --git a/static/usage/v7/reorder/updating-data/vue.md b/static/usage/v7/reorder/updating-data/vue.md
index 18a2d341353..024caf38347 100644
--- a/static/usage/v7/reorder/updating-data/vue.md
+++ b/static/usage/v7/reorder/updating-data/vue.md
@@ -3,7 +3,7 @@
   <ion-list>
     <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
     <ion-reorder-group :disabled="false" @ionItemReorder="handleReorder($event)">
-      <ion-item v-for="item in items">
+      <ion-item v-for="item in items" :key="item">
         <ion-label> Item {{ item }} </ion-label>
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>

From bf05d4d9811e920892f63b886922512261d10f75 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 9 Nov 2023 10:22:59 -0500
Subject: [PATCH 2/2] lint

---
 .../v7/reorder/updating-data/angular/example_component_ts.md    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/v7/reorder/updating-data/angular/example_component_ts.md b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
index 5eb0a0c547e..920f5f81e36 100644
--- a/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
@@ -23,7 +23,7 @@ export class ExampleComponent {
     // After complete is called the items will be in the new order
     console.log('After complete', this.items);
   }
-  
+
   trackItems(index: number, itemNumber: number) {
     return itemNumber;
   }