fix(content): tap-click deadlock

ionic-team · Jan 18, 2019 · 36eee46 · 36eee46
1 parent a6559a4
commit 36eee46
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 17 deletions.
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, QueueApi } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, QueueApi, Listen } from '@stencil/core';
 
 import { Color, Config, Mode, ScrollBaseDetail, ScrollDetail } from '../../interface';
 import { isPlatform } from '../../utils/platform';
@@ -113,8 +113,14 @@ export class Content implements ComponentInterface {
   }
 
   componentDidUnload() {
-    if (this.watchDog) {
-      clearInterval(this.watchDog);
+    this.onScrollEnd();
+  }
+
+  @Listen('click', { capture: true })
+  onClick(ev: Event) {
+    if (this.isScrolling) {
+      ev.preventDefault();
+      ev.stopPropagation();
     }
   }
 
@@ -269,13 +275,14 @@ export class Content implements ComponentInterface {
   }
 
   private onScrollEnd() {
-
     clearInterval(this.watchDog);
     this.watchDog = null;
-    this.isScrolling = false;
-    this.ionScrollEnd.emit({
-      isScrolling: false
-    });
+    if (this.isScrolling) {
+      this.isScrolling = false;
+      this.ionScrollEnd.emit({
+        isScrolling: false
+      });
+    }
   }
 
   hostData() {

diff --git a/core/src/components/nav/test/basic/index.html b/core/src/components/nav/test/basic/index.html
@@ -37,6 +37,12 @@
   --ion-background-color-rgb: 0,0,0;
   --ion-text-color-rgb: 255,255,255;
 }
+
+[f] {
+  background: green;
+  width: 100px;
+  height: 100px;
+}
 </style>
   <script>
     class PageOne extends HTMLElement {
@@ -74,6 +80,15 @@ <h1>Page Two</h1>
                 <ion-button class="next">Go to Page Three</ion-button>
               </ion-nav-push>
             </div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+            <div f></div>
+
           </ion-content>
         `;
       }

diff --git a/core/src/utils/tap-click.ts b/core/src/utils/tap-click.ts
@@ -15,14 +15,6 @@ export function startTapClick(doc: Document, config: Config) {
   const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true);
   const clearDefers = new WeakMap<HTMLElement, any>();
 
-  function onBodyClick(ev: Event) {
-    if (cancelled || scrolling) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      cancelled = false;
-    }
-  }
-
   // Touch Events
   function onTouchStart(ev: TouchEvent) {
     lastTouch = now(ev);
@@ -145,7 +137,6 @@ export function startTapClick(doc: Document, config: Config) {
     }
   }
 
-  doc.addEventListener('click', onBodyClick, true);
   doc.addEventListener('ionScrollStart', () => {
     scrolling = true;
     cancelActive();