fix(modal): native keyboard will dismiss when bottom sheet is dragged (…

…#24642) Resolves #23878 Co-authored-by: EinfachHans <[email protected]>
ionic-team · Jan 25, 2022 · 525f01f · 525f01f
1 parent 632dafc
commit 525f01f
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 6 deletions.
diff --git a/core/src/components/modal/gestures/sheet.ts b/core/src/components/modal/gestures/sheet.ts
@@ -1,6 +1,7 @@
 import { Animation } from '../../../interface';
 import { GestureDetail, createGesture } from '../../../utils/gesture';
 import { clamp, raf } from '../../../utils/helpers';
+import { KEYBOARD_DID_OPEN } from '../../../utils/keyboard/keyboard';
 import { getBackdropValueForSheet } from '../utils';
 
 export const createSheetGesture = (
@@ -42,6 +43,27 @@ export const createSheetGesture = (
   const backdropAnimation = animation.childAnimations.find(ani => ani.id === 'backdropAnimation');
   const maxBreakpoint = breakpoints[breakpoints.length - 1];
 
+  const keyboardOpenCallback = () => {
+    /**
+     * When the native keyboard is opened and the webview
+     * is resized, the gesture implementation will become unresponsive
+     * and enter a free-scroll mode.
+     *
+     * When the keyboard is opened, we disable the gesture for
+     * a single frame and re-enable once the contents have repositioned
+     * from the keyboard placement.
+     */
+    gesture.enable(false);
+    raf(() => {
+      gesture.enable(true)
+    });
+  };
+
+  /* tslint:disable-next-line */
+  if (typeof window !== 'undefined') {
+    window.addEventListener(KEYBOARD_DID_OPEN, keyboardOpenCallback);
+  }
+
   /**
    * After the entering animation completes,
    * we need to set the animation to go from
@@ -93,6 +115,17 @@ export const createSheetGesture = (
       contentEl.scrollY = false;
     }
 
+    /* tslint:disable-next-line */
+    if (typeof document !== 'undefined') {
+      const activeElement = baseEl.ownerDocument.activeElement as HTMLElement;
+      if (activeElement.matches('input,ion-input,textarea,ion-textarea')) {
+        raf(() => {
+          // Dismisses the open keyboard when the sheet drag gesture is started.
+          activeElement.blur();
+        });
+      }
+    }
+
     animation.progressStart(true, 1 - currentBreakpoint);
   };
 
@@ -188,11 +221,11 @@ export const createSheetGesture = (
           }
         }
 
-      /**
-       * This must be a one time callback
-       * otherwise a new callback will
-       * be added every time onEnd runs.
-       */
+        /**
+         * This must be a one time callback
+         * otherwise a new callback will
+         * be added every time onEnd runs.
+         */
       }, { oneTimeCallback: true })
       .progressEnd(1, 0, 500);
 
@@ -201,6 +234,13 @@ export const createSheetGesture = (
     }
   };
 
+  const onDestroy = () => {
+    /* tslint:disable-next-line */
+    if (typeof window !== 'undefined') {
+      window.removeEventListener(KEYBOARD_DID_OPEN, keyboardOpenCallback);
+    }
+  }
+
   const gesture = createGesture({
     el: wrapperEl,
     gestureName: 'modalSheet',
@@ -210,7 +250,8 @@ export const createSheetGesture = (
     canStart,
     onStart,
     onMove,
-    onEnd
+    onEnd,
+    onDestroy
   });
   return gesture;
 };
diff --git a/core/src/utils/gesture/index.ts b/core/src/utils/gesture/index.ts
@@ -231,6 +231,9 @@ export const createGesture = (config: GestureConfig): Gesture => {
     destroy() {
       gesture.destroy();
       pointerEvents.destroy();
+      if (config.onDestroy !== undefined) {
+        config.onDestroy();
+      }
     }
   };
 };
@@ -325,6 +328,11 @@ export interface GestureConfig {
   onStart?: GestureCallback;
   onMove?: GestureCallback;
   onEnd?: GestureCallback;
+  /**
+   * Callback to extend the behavior when a gesture
+   * handler is destroyed.
+   */
+  onDestroy?: () => void;
   notCaptured?: GestureCallback;
 }