fix(content): tap-click deadlock (#17170)

fixes #17138
fixes #16863
fixes #16191
fixes #16911

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, Listen, Method, Prop, QueueApi } 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() {

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 @@
                 <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>
         `;
       }

core/src/utils/tap-click.ts

@@ -6,7 +6,7 @@ export function startTapClick(doc: Document, config: Config) {
   let lastTouch = -MOUSE_WAIT * 10;
   let lastActivated = 0;
   let cancelled = false;
-  let scrolling = false;
+  let scrollingEl: HTMLElement | undefined;
 
   let activatableEle: HTMLElement | undefined;
   let activeRipple: Promise<() => void> | undefined;
@@ -15,12 +15,8 @@ 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;
-    }
+  function isScrolling() {
+    return scrollingEl !== undefined && scrollingEl.parentElement !== null;
   }
 
   // Touch Events
@@ -59,15 +55,16 @@ export function startTapClick(doc: Document, config: Config) {
   }
 
   function pointerDown(ev: any) {
-    if (activatableEle || scrolling) {
+    cancelled = false;
+    if (activatableEle || isScrolling()) {
       return;
     }
-    cancelled = false;
+    scrollingEl = undefined;
     setActivatedElement(getActivatableTarget(ev), ev);
   }
 
   function pointerUp(ev: UIEvent) {
-    if (scrolling) {
+    if (isScrolling()) {
       return;
     }
     setActivatedElement(undefined, ev);
@@ -145,13 +142,12 @@ export function startTapClick(doc: Document, config: Config) {
     }
   }
 
-  doc.addEventListener('click', onBodyClick, true);
-  doc.addEventListener('ionScrollStart', () => {
-    scrolling = true;
+  doc.addEventListener('ionScrollStart', ev => {
+    scrollingEl = ev.target as HTMLElement;
     cancelActive();
   });
   doc.addEventListener('ionScrollEnd', () => {
-    scrolling = false;
+    scrollingEl = undefined;
   });
   doc.addEventListener('ionGestureCaptured', cancelActive);