diff --git a/core/src/components/modal/gestures/sheet.ts b/core/src/components/modal/gestures/sheet.ts index 1fad01b47ec..2fc4599bb90 100644 --- 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_CLOSE, KEYBOARD_DID_OPEN } from '../../../utils/keyboard/keyboard'; import { getBackdropValueForSheet } from '../utils'; export const createSheetGesture = ( @@ -42,6 +43,19 @@ export const createSheetGesture = ( const backdropAnimation = animation.childAnimations.find(ani => ani.id === 'backdropAnimation'); const maxBreakpoint = breakpoints[breakpoints.length - 1]; + if (typeof window !== 'undefined') { + const keyboardOpenCallback = () => { + gesture.enable(false); + }; + + const keyboardCloseCallback = () => { + gesture.enable(true); + } + + window.addEventListener(KEYBOARD_DID_OPEN, keyboardOpenCallback); + window.addEventListener(KEYBOARD_DID_CLOSE, keyboardCloseCallback); + } + /** * After the entering animation completes, * we need to set the animation to go from @@ -80,6 +94,14 @@ export const createSheetGesture = ( return false; } + if (typeof document !== 'undefined') { + const activeElement = baseEl.ownerDocument.activeElement as HTMLElement; + if (activeElement.matches('input,ion-input,textarea,ion-textarea')) { + // Dismisses the open keyboard when the sheet drag gesture is started. + activeElement.blur(); + } + } + return true; }; @@ -188,11 +210,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);