mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
feat(gesture): add support for blurring active inputs on gesture start (#20638)
fixes #20588
This commit is contained in:
@ -191,6 +191,7 @@ AFTER:
|
||||
gestureName: 'menu-swipe',
|
||||
gesturePriority: 30,
|
||||
threshold: 10,
|
||||
blurOnStart: true,
|
||||
canStart: ev => this.canStart(ev),
|
||||
onWillStart: () => this.onWillStart(),
|
||||
onStart: () => this.onStart(),
|
||||
|
||||
@ -26,6 +26,7 @@ export const createGesture = (config: GestureConfig): Gesture => {
|
||||
const notCaptured = finalConfig.notCaptured;
|
||||
const onMove = finalConfig.onMove;
|
||||
const threshold = finalConfig.threshold;
|
||||
const blurOnStart = finalConfig.blurOnStart;
|
||||
|
||||
const detail = {
|
||||
type: 'pan',
|
||||
@ -141,7 +142,20 @@ export const createGesture = (config: GestureConfig): Gesture => {
|
||||
return true;
|
||||
};
|
||||
|
||||
const blurActiveElement = () => {
|
||||
/* tslint:disable-next-line */
|
||||
if (typeof document !== 'undefined') {
|
||||
const activeElement = document.activeElement as HTMLElement | null;
|
||||
if (activeElement !== null && activeElement.blur) {
|
||||
activeElement.blur();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const fireOnStart = () => {
|
||||
if (blurOnStart) {
|
||||
blurActiveElement();
|
||||
}
|
||||
if (onStart) {
|
||||
onStart(detail);
|
||||
}
|
||||
@ -301,6 +315,7 @@ export interface GestureConfig {
|
||||
passive?: boolean;
|
||||
maxAngle?: number;
|
||||
threshold?: number;
|
||||
blurOnStart?: boolean;
|
||||
|
||||
canStart?: GestureCallback;
|
||||
onWillStart?: (_: GestureDetail) => Promise<void>;
|
||||
|
||||
Reference in New Issue
Block a user