fix(reorder): not trigger click event when reordering

- fixes reorder icon animation on iOS
- fixes crash when clicking the reorder icon very quickly

fixes #8362

Author: manucorporat

src/components/item/item-reorder-gesture.ts

@@ -34,6 +34,9 @@ export class ItemReorderGesture {
   }
 
   private onDragStart(ev: any): boolean {
+    if (this.selectedItemEle) {
+      return false;
+    }
     let reorderElement = ev.target;
     if (reorderElement.nodeName !== 'ION-REORDER') {
       return false;
@@ -90,7 +93,7 @@ export class ItemReorderGesture {
       if (overItem) {
         let toIndex = indexForItem(overItem);
         if (toIndex !== undefined && (toIndex !== this.lastToIndex || this.emptyZone)) {
-          let fromIndex = indexForItem(this.selectedItemEle);
+          let fromIndex = indexForItem(selectedItem);
           this.lastToIndex = toIndex;
           this.lastYcoord = posY;
           this.emptyZone = false;
@@ -106,21 +109,26 @@ export class ItemReorderGesture {
     (<any>selectedItem.style)[CSS.transform] = `translateY(${ydiff}px)`;
   }
 
-  private onDragEnd() {
-    if (!this.selectedItemEle) {
+  private onDragEnd(ev: any) {
+    let selectedItem = this.selectedItemEle;
+    if (!selectedItem) {
       return;
     }
+    if (ev) {
+      ev.preventDefault();
+      ev.stopPropagation();
+    }
 
     let toIndex = this.lastToIndex;
-    let fromIndex = indexForItem(this.selectedItemEle);
+    let fromIndex = indexForItem(selectedItem);
     let reorderInactive = () => {
       this.selectedItemEle.style.transition = '';
       this.selectedItemEle.classList.remove(ITEM_REORDER_ACTIVE);
       this.selectedItemEle = null;
     };
 
     if (toIndex === fromIndex) {
-      this.selectedItemEle.style.transition = 'transform 200ms ease-in-out';
+      selectedItem.style.transition = 'transform 200ms ease-in-out';
       setTimeout(reorderInactive, 200);
     } else {
       reorderInactive();
@@ -145,7 +153,7 @@ export class ItemReorderGesture {
    * @private
    */
   destroy() {
-    this.onDragEnd();
+    this.onDragEnd(null);
     this.events.unlistenAll();
     this.events = null;
     this.reorderList = null;

src/components/item/item-reorder.scss

@@ -16,9 +16,9 @@ ion-reorder {
   font-size: 1.7em;
   opacity: .25;
 
-  transform: translate3d(120%, 0, 0);
+  transform: translate3d(160%, 0, 0);
 
-  transition: transform 125ms ease-in;
+  transition: transform 140ms ease-in;
 
   pointer-events: all;
   touch-action: manipulation;

src/components/item/item-reorder.ts

@@ -1,4 +1,4 @@
-import { Component, Directive, ElementRef, EventEmitter, forwardRef, Input, NgZone, Renderer, Inject, Optional, Output } from '@angular/core';
+import { Component, Directive, ElementRef, EventEmitter, forwardRef, HostListener, Input, NgZone, Renderer, Inject, Optional, Output } from '@angular/core';
 
 import { Content } from '../content/content';
 import { CSS, zoneRafFrames } from '../../util/dom';
@@ -328,6 +328,13 @@ export class Reorder {
     return findReorderItem(node, null);
   }
 
+  @HostListener('click', ['$event'])
+  onClick(ev) {
+    // Stop propagation if click event reaches ion-reorder
+    ev.preventDefault();
+    ev.stopPropagation();
+  }
+
 }
 
 /**

src/components/item/item.ios.scss

@@ -33,7 +33,7 @@ $item-ios-sliding-content-background:     $list-ios-background-color !default;
   font-size: $item-ios-body-text-font-size;
   color: $list-ios-text-color;
   background-color: $list-ios-background-color;
-  transition-duration: 200ms;
+  transition: background-color 200ms linear;
 }
 
 .item-ios.activated {

src/components/item/test/reorder/main.html

@@ -22,7 +22,7 @@
   <ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)">
     <ion-item-sliding *ngFor="let item of items">
       <button ion-item (click)="clickedButton(item)">
-        Sliding item {{item}}
+        <h2>Sliding item {{item}}</h2>
       </button>
       <ion-item-options side="right" icon-left>
         <button ion-button color='danger'>