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

fix(action-sheet, alert): resolve double click issue when running in iOS mode on chrome (#21506)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-06-12 10:36:09 -04:00
committed by GitHub
parent e968bd029a
commit bcccc217b8
1 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
core/src/utils/gesture/button-active.ts
View File

@ -8,7 +8,8 @@ export const createButtonActiveGesture = (
el: HTMLElement, el: HTMLElement,
isButton: (refEl: HTMLElement) => boolean isButton: (refEl: HTMLElement) => boolean
): Gesture => { ): Gesture => {
let touchedButton: HTMLElement | undefined; let currentTouchedButton: HTMLElement | undefined;
let initialTouchedButton: HTMLElement | undefined;
const activateButtonAtPoint = (x: number, y: number, hapticFeedbackFn: () => void) => { const activateButtonAtPoint = (x: number, y: number, hapticFeedbackFn: () => void) => {
if (typeof (document as any) === 'undefined') { return; } if (typeof (document as any) === 'undefined') { return; }
@ -18,30 +19,43 @@ export const createButtonActiveGesture = (
return; return;
} }
if (target !== touchedButton) { if (target !== currentTouchedButton) {
clearActiveButton(); clearActiveButton();
setActiveButton(target, hapticFeedbackFn); setActiveButton(target, hapticFeedbackFn);
} }
}; };
const setActiveButton = (button: HTMLElement, hapticFeedbackFn: () => void) => { const setActiveButton = (button: HTMLElement, hapticFeedbackFn: () => void) => {
touchedButton = button; currentTouchedButton = button;
const buttonToModify = touchedButton;
if (!initialTouchedButton) {
initialTouchedButton = currentTouchedButton;
}
const buttonToModify = currentTouchedButton;
writeTask(() => buttonToModify.classList.add('ion-activated')); writeTask(() => buttonToModify.classList.add('ion-activated'));
hapticFeedbackFn(); hapticFeedbackFn();
}; };
const clearActiveButton = (dispatchClick = false) => { const clearActiveButton = (dispatchClick = false) => {
if (!touchedButton) { return; } if (!currentTouchedButton) { return; }
const buttonToModify = touchedButton; const buttonToModify = currentTouchedButton;
writeTask(() => buttonToModify.classList.remove('ion-activated')); writeTask(() => buttonToModify.classList.remove('ion-activated'));
if (dispatchClick) { /**
touchedButton.click(); * Clicking on one button, but releasing on another button
* does not dispatch a click event in browsers, so we
* need to do it manually here. Some browsers will
* dispatch a click if clicking on one button, dragging over
* another button, and releasing on the original button. In that
* case, we need to make sure we do not cause a double click there.
*/
if (dispatchClick && initialTouchedButton !== currentTouchedButton) {
currentTouchedButton.click();
} }
touchedButton = undefined; currentTouchedButton = undefined;
}; };
return createGesture({ return createGesture({
@ -53,6 +67,7 @@ export const createButtonActiveGesture = (
onEnd: () => { onEnd: () => {
clearActiveButton(true); clearActiveButton(true);
hapticSelectionEnd(); hapticSelectionEnd();
initialTouchedButton = undefined;
} }
}); });
}; };