From 491927f81e0da923b59f53aa7bd07a9cd3bac499 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Thu, 16 Apr 2020 11:16:20 -0400
Subject: [PATCH 1/7] action sheet hover

---
 .../action-sheet/action-sheet.ios.scss        |  2 +
 .../components/action-sheet/action-sheet.scss |  3 +-
 .../components/action-sheet/action-sheet.tsx  | 58 ++++++++++++++++++-
 3 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss
index 6eb41fd99c2..126e346f8e6 100644
--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.scss
@@ -134,6 +134,8 @@
   @include margin-horizontal(null, $action-sheet-ios-button-icon-padding-right);
 
   font-size: $action-sheet-ios-button-icon-font-size;
+
+  pointer-events: none;
 }
 
 .action-sheet-button:last-child {
diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index 227a182c921..fa2ce51899a 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -110,6 +110,7 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
+  pointer-events: none;
 
   width: 100%;
   height: 100%;
@@ -210,4 +211,4 @@
       opacity: var(--button-background-hover-opacity);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 47d31552e1e..e33e753dab6 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -4,6 +4,9 @@ import { getIonMode } from '../../global/ionic-global';
 import { ActionSheetButton, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';
+import { raf } from '../../utils/helpers'
+import { createGesture, Gesture } from '../../utils/gesture';
+import { hapticImpact } from '../../utils/native/haptic';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
@@ -25,6 +28,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   presented = false;
   animation?: any;
+  wrapperEl?: HTMLElement;
 
   @Element() el!: HTMLIonActionSheetElement;
 
@@ -192,6 +196,58 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     }
   }
 
+  private gesture?: Gesture;
+  private touchedButton?: HTMLElement;
+
+  private clearActiveButton(dispatchClick: boolean = false) {
+    const { touchedButton } = this;
+    if (!touchedButton) { return; }
+
+    raf(() => touchedButton.classList.remove('ion-activated'));
+
+    if (dispatchClick) {
+      touchedButton.click();
+    }
+
+    this.touchedButton = undefined;
+  }
+
+  private setActiveButton(button: HTMLElement) {
+    this.touchedButton = button;
+    raf(() => this.touchedButton!.classList.add('ion-activated'));
+    hapticImpact({ style: 'light' });
+  }
+
+  componentDidLoad() {
+    if (!this.wrapperEl) { return; }
+
+    this.gesture = createGesture({
+      el: this.wrapperEl,
+      gestureName: 'pointerDrag',
+      gesturePriority: 100,
+      threshold: 0,
+      onMove: (ev) => {
+        const target = document.elementFromPoint(ev.currentX, ev.currentY) as HTMLElement | null;
+        const { touchedButton } = this;
+        if (!target) {
+          this.clearActiveButton();
+        } else {
+          if (target.classList.contains('action-sheet-button')) {
+            if (target !== touchedButton) {
+              this.clearActiveButton();
+              this.setActiveButton(target);
+            }
+          } else {
+            this.clearActiveButton();
+          }
+        }
+      },
+      onEnd: () => { this.clearActiveButton(true) }
+    });
+
+    this.gesture.enable(true);
+  }
+
   render() {
     const mode = getIonMode(this);
     const allButtons = this.getButtons();
@@ -215,7 +271,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         onIonBackdropTap={this.onBackdropTap}
       >
         <ion-backdrop tappable={this.backdropDismiss}/>
-        <div class="action-sheet-wrapper" role="dialog">
+        <div class="action-sheet-wrapper" role="dialog" ref={el => this.wrapperEl = el}>
           <div class="action-sheet-container">
             <div class="action-sheet-group">
               {this.header !== undefined &&

From a4bfdb6229a5020012963bd3fb89ee3cff949e2c Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Thu, 16 Apr 2020 16:34:38 -0400
Subject: [PATCH 2/7] add haptic gesture for alert and action sheet

---
 .../components/action-sheet/action-sheet.tsx  | 69 ++++++-------------
 core/src/components/alert/alert.ios.scss      |  4 ++
 core/src/components/alert/alert.tsx           | 30 +++++++-
 core/src/utils/gesture/button-active.ts       | 55 +++++++++++++++
 core/src/utils/native/haptic.ts               |  4 +-
 5 files changed, 110 insertions(+), 52 deletions(-)
 create mode 100644 core/src/utils/gesture/button-active.ts

diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index e33e753dab6..b01f3051265 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -2,11 +2,10 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
 
 import { getIonMode } from '../../global/ionic-global';
 import { ActionSheetButton, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
+import { Gesture } from '../../utils/gesture';
+import { createButtonActiveGesture } from '../../utils/gesture/button-active';
 import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';
-import { raf } from '../../utils/helpers'
-import { createGesture, Gesture } from '../../utils/gesture';
-import { hapticImpact } from '../../utils/native/haptic';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
@@ -28,7 +27,8 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   presented = false;
   animation?: any;
-  wrapperEl?: HTMLElement;
+  private wrapperEl?: HTMLElement;
+  private gesture?: Gesture;
 
   @Element() el!: HTMLIonActionSheetElement;
 
@@ -196,55 +196,26 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     }
   }
 
-  private gesture?: Gesture;
-  private touchedButton?: HTMLElement;
-
-  private clearActiveButton(dispatchClick: boolean = false) {
-    const { touchedButton } = this;
-    if (!touchedButton) { return; }
-
-    raf(() => touchedButton.classList.remove('ion-activated'));
-
-    if (dispatchClick) {
-      touchedButton.click();
+  componentDidUnload() {
+    if (this.gesture) {
+      this.gesture.destroy();
+      this.gesture = undefined;
     }
-
-    this.touchedButton = undefined;
-  }
-
-  private setActiveButton(button: HTMLElement) {
-    this.touchedButton = button;
-    raf(() => this.touchedButton!.classList.add('ion-activated'));
-    hapticImpact({ style: 'light' });
   }
 
   componentDidLoad() {
-    if (!this.wrapperEl) { return; }
-
-    this.gesture = createGesture({
-      el: this.wrapperEl,
-      gestureName: 'pointerDrag',
-      gesturePriority: 100,
-      threshold: 0,
-      onMove: (ev) => {
-        const target = document.elementFromPoint(ev.currentX, ev.currentY) as HTMLElement | null;
-        const { touchedButton } = this;
-        if (!target) {
-          this.clearActiveButton();
-        } else {
-          if (target.classList.contains('action-sheet-button')) {
-            if (target !== touchedButton) {
-              this.clearActiveButton();
-              this.setActiveButton(target);
-            }
-          } else {
-            this.clearActiveButton();
-          }
-        }
-      },
-      onEnd: () => { this.clearActiveButton(true) }
-    });
-
+    /**
+     * Do not create gesture if:
+     * 1. A gesture already exists
+     * 2. App is running in MD mode
+     * 3. A wrapper ref does not exist
+     */
+    if (this.gesture || getIonMode(this) === 'md' || !this.wrapperEl) { return; }
+
+    this.gesture = createButtonActiveGesture(
+      this.wrapperEl,
+      (refEl: HTMLElement) => refEl.classList.contains('action-sheet-button')
+    );
     this.gesture.enable(true);
   }
 
diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss
index 5f8756b149c..af0de5b2664 100644
--- a/core/src/components/alert/alert.ios.scss
+++ b/core/src/components/alert/alert.ios.scss
@@ -19,6 +19,10 @@
   overflow: hidden;
 }
 
+.alert-button-inner {
+  pointer-events: none;
+}
+
 
 // iOS Translucent Alert
 // -----------------------------------------
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 193b4b7749d..49461a5fd31 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -2,6 +2,8 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
 
 import { getIonMode } from '../../global/ionic-global';
 import { AlertButton, AlertInput, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
+import { Gesture } from '../../utils/gesture';
+import { createButtonActiveGesture } from '../../utils/gesture/button-active';
 import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
 import { sanitizeDOMString } from '../../utils/sanitization';
 import { getClassMap } from '../../utils/theme';
@@ -28,6 +30,8 @@ export class Alert implements ComponentInterface, OverlayInterface {
   private inputType?: string;
   private processedInputs: AlertInput[] = [];
   private processedButtons: AlertButton[] = [];
+  private wrapperEl?: HTMLElement;
+  private gesture?: Gesture;
 
   presented = false;
 
@@ -170,6 +174,30 @@ export class Alert implements ComponentInterface, OverlayInterface {
     this.buttonsChanged();
   }
 
+  componentDidUnload() {
+    if (this.gesture) {
+      this.gesture.destroy();
+      this.gesture = undefined;
+    }
+  }
+
+  componentDidLoad() {
+    /**
+     * Do not create gesture if:
+     * 1. A gesture already exists
+     * 2. App is running in MD mode
+     * 3. A wrapper ref does not exist
+     */
+    if (this.gesture || getIonMode(this) === 'md' || !this.wrapperEl) { return; }
+
+    this.gesture = createButtonActiveGesture(
+      this.wrapperEl,
+      (refEl: HTMLElement) => refEl.classList.contains('alert-button')
+    );
+    this.gesture.enable(true);
+    console.log(this.gesture, this.wrapperEl);
+  }
+
   /**
    * Present the alert overlay after it has been created.
    */
@@ -480,7 +508,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
         <ion-backdrop tappable={this.backdropDismiss}/>
 
-        <div class="alert-wrapper">
+        <div class="alert-wrapper" ref={el => this.wrapperEl = el}>
 
           <div class="alert-head">
             {header && <h2 id={hdrId} class="alert-title">{header}</h2>}
diff --git a/core/src/utils/gesture/button-active.ts b/core/src/utils/gesture/button-active.ts
new file mode 100644
index 00000000000..fcb105fa841
--- /dev/null
+++ b/core/src/utils/gesture/button-active.ts
@@ -0,0 +1,55 @@
+import { raf } from '../helpers';
+import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../native/haptic';
+
+import { Gesture, createGesture } from './index';
+
+export const createButtonActiveGesture = (
+  el: HTMLElement,
+  isButton: (refEl: HTMLElement) => boolean
+): Gesture => {
+  let touchedButton: HTMLElement | undefined;
+
+  const activateButtonAtPoint = (x: number, y: number, hapticFeedbackFn: () => void) => {
+    const target = document.elementFromPoint(x, y) as HTMLElement | null;
+    console.log(target);
+    if (!target || !isButton(target)) {
+      clearActiveButton();
+      return;
+    }
+
+    if (target !== touchedButton) {
+      clearActiveButton();
+      setActiveButton(target, hapticFeedbackFn);
+    }
+  };
+
+  const setActiveButton = (button: HTMLElement, hapticFeedbackFn: () => void) => {
+    touchedButton = button;
+    raf(() => touchedButton!.classList.add('ion-activated'));
+    hapticFeedbackFn();
+  };
+
+  const clearActiveButton = (dispatchClick = false) => {
+    if (!touchedButton) { return; }
+
+    touchedButton!.classList.remove('ion-activated');
+
+    if (dispatchClick) {
+      touchedButton.click();
+    }
+
+    touchedButton = undefined;
+  };
+
+  return createGesture({
+    el,
+    gestureName: 'buttonActiveDrag',
+    threshold: 0,
+    onStart: ev => activateButtonAtPoint(ev.currentX, ev.currentY, hapticSelectionStart),
+    onMove: ev => activateButtonAtPoint(ev.currentX, ev.currentY, hapticSelectionChanged),
+    onEnd: () => {
+      clearActiveButton(true);
+      hapticSelectionEnd();
+    }
+  });
+};
diff --git a/core/src/utils/native/haptic.ts b/core/src/utils/native/haptic.ts
index d95505ba1d9..8512e0d5a23 100644
--- a/core/src/utils/native/haptic.ts
+++ b/core/src/utils/native/haptic.ts
@@ -69,9 +69,9 @@ const HapticEngine = {
       return;
     }
     if (this.isCapacitor()) {
-      engine.selectionChanged();
+      engine.selectionEnd();
     } else {
-      engine.gestureSelectionChanged();
+      engine.gestureSelectionEnd();
     }
   }
 };

From 9f2cde4a938b8d12b30c0eceecc7c5a689ba1002 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Thu, 16 Apr 2020 20:41:02 +0000
Subject: [PATCH 3/7] remove console log, fix race condition

---
 core/src/components/alert/alert.tsx     | 1 -
 core/src/utils/gesture/button-active.ts | 8 +++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 49461a5fd31..d05622396ca 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -195,7 +195,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
       (refEl: HTMLElement) => refEl.classList.contains('alert-button')
     );
     this.gesture.enable(true);
-    console.log(this.gesture, this.wrapperEl);
   }
 
   /**
diff --git a/core/src/utils/gesture/button-active.ts b/core/src/utils/gesture/button-active.ts
index fcb105fa841..3e463e9a0f5 100644
--- a/core/src/utils/gesture/button-active.ts
+++ b/core/src/utils/gesture/button-active.ts
@@ -1,4 +1,4 @@
-import { raf } from '../helpers';
+import { writeTask } from '@stencil/core';
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../native/haptic';
 
 import { Gesture, createGesture } from './index';
@@ -25,14 +25,16 @@ export const createButtonActiveGesture = (
 
   const setActiveButton = (button: HTMLElement, hapticFeedbackFn: () => void) => {
     touchedButton = button;
-    raf(() => touchedButton!.classList.add('ion-activated'));
+    const buttonToModify = touchedButton;
+    writeTask(() => buttonToModify.classList.add('ion-activated'));
     hapticFeedbackFn();
   };
 
   const clearActiveButton = (dispatchClick = false) => {
     if (!touchedButton) { return; }
 
-    touchedButton!.classList.remove('ion-activated');
+    const buttonToModify = touchedButton;
+    writeTask(() => buttonToModify.classList.remove('ion-activated'));
 
     if (dispatchClick) {
       touchedButton.click();

From de428c95edad1857311772402bb7395924d3713e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Thu, 16 Apr 2020 20:43:25 +0000
Subject: [PATCH 4/7] remove log

---
 core/src/utils/gesture/button-active.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/core/src/utils/gesture/button-active.ts b/core/src/utils/gesture/button-active.ts
index 3e463e9a0f5..6943e493a5a 100644
--- a/core/src/utils/gesture/button-active.ts
+++ b/core/src/utils/gesture/button-active.ts
@@ -11,7 +11,6 @@ export const createButtonActiveGesture = (
 
   const activateButtonAtPoint = (x: number, y: number, hapticFeedbackFn: () => void) => {
     const target = document.elementFromPoint(x, y) as HTMLElement | null;
-    console.log(target);
     if (!target || !isButton(target)) {
       clearActiveButton();
       return;

From 6c2873635308a4c68d27c71f3044a4ee8e8426d4 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Thu, 16 Apr 2020 20:48:01 +0000
Subject: [PATCH 5/7] make selector more specific

---
 core/src/components/alert/alert.ios.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss
index af0de5b2664..28567b2516b 100644
--- a/core/src/components/alert/alert.ios.scss
+++ b/core/src/components/alert/alert.ios.scss
@@ -19,7 +19,7 @@
   overflow: hidden;
 }
 
-.alert-button-inner {
+.alert-button .alert-button-inner {
   pointer-events: none;
 }
 

From 9a02bc58eca0ba449111316a9617660bfbbd3e89 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Thu, 16 Apr 2020 17:41:19 -0400
Subject: [PATCH 6/7] run linter, do not run if scrollable on action sheet

---
 .../components/action-sheet/action-sheet.tsx  | 25 ++++++++++++-------
 core/src/utils/gesture/button-active.ts       |  1 +
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index b01f3051265..a34aa0c2834 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, h } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, h, readTask } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 import { ActionSheetButton, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
@@ -28,6 +28,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   presented = false;
   animation?: any;
   private wrapperEl?: HTMLElement;
+  private groupEl?: HTMLElement;
   private gesture?: Gesture;
 
   @Element() el!: HTMLIonActionSheetElement;
@@ -210,13 +211,19 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
      * 2. App is running in MD mode
      * 3. A wrapper ref does not exist
      */
-    if (this.gesture || getIonMode(this) === 'md' || !this.wrapperEl) { return; }
-
-    this.gesture = createButtonActiveGesture(
-      this.wrapperEl,
-      (refEl: HTMLElement) => refEl.classList.contains('action-sheet-button')
-    );
-    this.gesture.enable(true);
+    const { groupEl, wrapperEl } = this;
+    if (this.gesture || getIonMode(this) === 'md' || !wrapperEl || !groupEl) { return; }
+
+    readTask(() => {
+      const isScrollable = groupEl.scrollHeight > groupEl.clientHeight;
+      if (!isScrollable) {
+        this.gesture = createButtonActiveGesture(
+          wrapperEl,
+          (refEl: HTMLElement) => refEl.classList.contains('action-sheet-button')
+        );
+        this.gesture.enable(true);
+      }
+    });
   }
 
   render() {
@@ -244,7 +251,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         <ion-backdrop tappable={this.backdropDismiss}/>
         <div class="action-sheet-wrapper" role="dialog" ref={el => this.wrapperEl = el}>
           <div class="action-sheet-container">
-            <div class="action-sheet-group">
+            <div class="action-sheet-group" ref={el => this.groupEl = el}>
               {this.header !== undefined &&
                 <div class="action-sheet-title">
                   {this.header}
diff --git a/core/src/utils/gesture/button-active.ts b/core/src/utils/gesture/button-active.ts
index 6943e493a5a..79717cf847f 100644
--- a/core/src/utils/gesture/button-active.ts
+++ b/core/src/utils/gesture/button-active.ts
@@ -1,4 +1,5 @@
 import { writeTask } from '@stencil/core';
+
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../native/haptic';
 
 import { Gesture, createGesture } from './index';

From 17fd1266315bcfc9ac8a1580930997213e98eae4 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Wed, 13 May 2020 12:54:06 -0400
Subject: [PATCH 7/7] add ssr check

---
 core/src/utils/gesture/button-active.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/src/utils/gesture/button-active.ts b/core/src/utils/gesture/button-active.ts
index 79717cf847f..cc8af391f5f 100644
--- a/core/src/utils/gesture/button-active.ts
+++ b/core/src/utils/gesture/button-active.ts
@@ -11,6 +11,7 @@ export const createButtonActiveGesture = (
   let touchedButton: HTMLElement | undefined;
 
   const activateButtonAtPoint = (x: number, y: number, hapticFeedbackFn: () => void) => {
+    if (typeof (document as any) === 'undefined') { return; }
     const target = document.elementFromPoint(x, y) as HTMLElement | null;
     if (!target || !isButton(target)) {
       clearActiveButton();