fix reorder

Author: manucorporat

core/src/components/item/test/reorder/index.html

@@ -81,20 +81,13 @@
         groupEl.disabled = !isReordering;
       }
     }
-    const reorderArray = (array, from, to) => {
-      const element = array[from];
-      array.splice(from, 1);
-      array.splice(to, 0, element);
-      return array.slice();
-    };
 
 
     function initGroup(group) {
       var groupEl = document.getElementById(group.id);
 
       groupEl.addEventListener('ionItemReorder', function (ev) {
-        groupItems = ev.detail.complete(groupItems);
-        renderGroup(groupEl, groupItems);
+        ev.detail.complete();
       });
 
       var groupItems = [];
@@ -111,24 +104,23 @@
     }
 
     function renderGroup(groupEl, items) {
-      groupEl.innerHTML = '';
-
+      let innerHTML = '';
       for (var i = 0; i < items.length; i++) {
         const index = items[i];
-        groupEl.innerHTML += `
+        innerHTML += `
           <ion-item onClick="clickedButton(${index})"
             style="min-height: ${index * 2 + 35}px; --background: rgb(${255 - index * 4}, ${255 - index * 4}, ${255 - index * 4})">
             ${index}
             <ion-reorder slot="end"></ion-reorder>
           </ion-item>`;
       }
+      groupEl.innerHTML = innerHTML;
     }
 
     function renderSlidingGroup(group, groupEl, items) {
-      groupEl.innerHTML = '';
-
+      let innerHTML = '';
       for (var i = 0; i < items.length; i++) {
-        groupEl.innerHTML += `
+        innerHTML += `
           <ion-item-sliding>
             <ion-item onclick="clickedButton(${i})">
               <ion-reorder slot="${group.side}"></ion-reorder>
@@ -145,6 +137,7 @@ <h2>Sliding item ${i}</h2>
             </ion-item-options>
           </ion-item-sliding>`;
       }
+      groupEl.innerHTML = innerHTML;
     }
   </script>
 

core/src/components/reorder-group/reorder-group.tsx

@@ -190,18 +190,20 @@ export class ReorderGroup implements ComponentInterface {
   }
 
   private onEnd() {
-    const selectedItem = this.selectedItemEl;
+    const selectedItemEl = this.selectedItemEl;
     this.state = ReorderGroupState.Complete;
-    if (!selectedItem) {
+    if (!selectedItemEl) {
       this.state = ReorderGroupState.Idle;
       return;
     }
 
     const toIndex = this.lastToIndex;
-    const fromIndex = indexForItem(selectedItem);
+    const fromIndex = indexForItem(selectedItemEl);
 
     if (toIndex === fromIndex) {
-      selectedItem.style.transition = 'transform 200ms ease-in-out';
+      selectedItemEl.style.transition = 'transform 200ms ease-in-out';
+      selectedItemEl.style.transform = '';
+      selectedItemEl.classList.remove(ITEM_REORDER_SELECTED);
       setTimeout(() => this.completeSync(), 200);
     } else {
       this.ionItemReorder.emit({
@@ -222,7 +224,7 @@ export class ReorderGroup implements ComponentInterface {
       const toIndex = this.lastToIndex;
       const fromIndex = indexForItem(selectedItemEl);
 
-      if (!listOrReorder || listOrReorder === true) {
+      if ((!listOrReorder || listOrReorder === true) && toIndex !== fromIndex) {
         const ref = (fromIndex < toIndex)
           ? children[toIndex + 1]
           : children[toIndex];