From 9b2ae8ad849c874d200dffc960e2bc608a3b799e Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.valladolid@gmail.com>
Date: Sun, 2 Oct 2016 18:53:19 +0200
Subject: [PATCH] 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
---
 src/components/item/item-reorder-gesture.ts | 20 ++++++++++++++------
 src/components/item/item-reorder.scss       |  4 ++--
 src/components/item/item-reorder.ts         |  9 ++++++++-
 src/components/item/item.ios.scss           |  2 +-
 src/components/item/test/reorder/main.html  |  2 +-
 5 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/components/item/item-reorder-gesture.ts b/src/components/item/item-reorder-gesture.ts
index fea1caa3d5..f87dde0a4a 100644
--- a/src/components/item/item-reorder-gesture.ts
+++ b/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,13 +109,18 @@ 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);
@@ -120,7 +128,7 @@ export class ItemReorderGesture {
     };
 
     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;
diff --git a/src/components/item/item-reorder.scss b/src/components/item/item-reorder.scss
index 6620ea9504..01f9fb82c8 100644
--- a/src/components/item/item-reorder.scss
+++ b/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;
diff --git a/src/components/item/item-reorder.ts b/src/components/item/item-reorder.ts
index 4ca806ed03..50f7e38629 100644
--- a/src/components/item/item-reorder.ts
+++ b/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();
+  }
+
 }
 
 /**
diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss
index 4babd809b6..d35a4404b0 100644
--- a/src/components/item/item.ios.scss
+++ b/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 {
diff --git a/src/components/item/test/reorder/main.html b/src/components/item/test/reorder/main.html
index e884285a11..0148f37c7a 100644
--- a/src/components/item/test/reorder/main.html
+++ b/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'>