javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(gesture): add support for blurring active inputs on gesture start (#20638)

Browse Source 
fixes #20588
This commit is contained in:
Liam DeBeasi
2020-04-27 10:52:14 -04:00
committed by GitHub
parent 32ee040e3f
commit 32ecdd6753
2 changed files with 16 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/src/components/menu/menu.tsx
View File

@ -191,6 +191,7 @@ AFTER:
gestureName: 'menu-swipe', gestureName: 'menu-swipe',
gesturePriority: 30, gesturePriority: 30,
threshold: 10, threshold: 10,
blurOnStart: true,
canStart: ev => this.canStart(ev), canStart: ev => this.canStart(ev),
onWillStart: () => this.onWillStart(), onWillStart: () => this.onWillStart(),
onStart: () => this.onStart(), onStart: () => this.onStart(),

15
core/src/utils/gesture/index.ts
View File

@ -26,6 +26,7 @@ export const createGesture = (config: GestureConfig): Gesture => {
const notCaptured = finalConfig.notCaptured; const notCaptured = finalConfig.notCaptured;
const onMove = finalConfig.onMove; const onMove = finalConfig.onMove;
const threshold = finalConfig.threshold; const threshold = finalConfig.threshold;
const blurOnStart = finalConfig.blurOnStart;
const detail = { const detail = {
type: 'pan', type: 'pan',
@ -141,7 +142,20 @@ export const createGesture = (config: GestureConfig): Gesture => {
return true; 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 = () => { const fireOnStart = () => {
if (blurOnStart) {
blurActiveElement();
}
if (onStart) { if (onStart) {
onStart(detail); onStart(detail);
} }
@ -301,6 +315,7 @@ export interface GestureConfig {
passive?: boolean; passive?: boolean;
maxAngle?: number; maxAngle?: number;
threshold?: number; threshold?: number;
blurOnStart?: boolean;
canStart?: GestureCallback; canStart?: GestureCallback;
onWillStart?: (_: GestureDetail) => Promise<void>; onWillStart?: (_: GestureDetail) => Promise<void>;