fix(ios): add haptic drag gesture for action sheet and alert components (#21060)

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 {

core/src/components/action-sheet/action-sheet.scss

@@ -112,6 +112,7 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
+  pointer-events: none;
 
   width: 100%;
   height: 100%;

core/src/components/action-sheet/action-sheet.tsx

@@ -1,7 +1,9 @@
-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';
+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';
 
@@ -25,6 +27,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   presented = false;
   animation?: any;
+  private wrapperEl?: HTMLElement;
+  private groupEl?: HTMLElement;
+  private gesture?: Gesture;
 
   @Element() el!: HTMLIonActionSheetElement;
 
@@ -192,6 +197,35 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     }
   }
 
+  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
+     */
+    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() {
     const mode = getIonMode(this);
     const allButtons = this.getButtons();
@@ -216,9 +250,9 @@ 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">
+            <div class="action-sheet-group" ref={el => this.groupEl = el}>
               {this.header !== undefined &&
                 <div class="action-sheet-title">
                   {this.header}

core/src/components/alert/alert.ios.scss

@@ -19,6 +19,10 @@
   overflow: hidden;
 }
 
+.alert-button .alert-button-inner {
+  pointer-events: none;
+}
+
 
 // iOS Translucent Alert
 // -----------------------------------------

core/src/components/alert/alert.tsx

@@ -3,6 +3,8 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
 import { IonicSafeString } from '../../';
 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';
@@ -29,6 +31,8 @@ export class Alert implements ComponentInterface, OverlayInterface {
   private inputType?: string;
   private processedInputs: AlertInput[] = [];
   private processedButtons: AlertButton[] = [];
+  private wrapperEl?: HTMLElement;
+  private gesture?: Gesture;
 
   presented = false;
 
@@ -171,6 +175,29 @@ 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);
+  }
+
   /**
    * Present the alert overlay after it has been created.
    */
@@ -482,7 +509,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>}