javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 15:51:16 +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,
isButton: (refEl: HTMLElement) => boolean
): Gesture => {
let touchedButton: HTMLElement | undefined;
let currentTouchedButton: HTMLElement | undefined;
let initialTouchedButton: HTMLElement | undefined;
const activateButtonAtPoint = (x: number, y: number, hapticFeedbackFn: () => void) => {
if (typeof (document as any) === 'undefined') { return; }
@ -18,30 +19,43 @@ export const createButtonActiveGesture = (
return;
}
if (target !== touchedButton) {
if (target !== currentTouchedButton) {
clearActiveButton();
setActiveButton(target, hapticFeedbackFn);
}
};
const setActiveButton = (button: HTMLElement, hapticFeedbackFn: () => void) => {
touchedButton = button;
const buttonToModify = touchedButton;
currentTouchedButton = button;
if (!initialTouchedButton) {
initialTouchedButton = currentTouchedButton;
}
const buttonToModify = currentTouchedButton;
writeTask(() => buttonToModify.classList.add('ion-activated'));
hapticFeedbackFn();
};
const clearActiveButton = (dispatchClick = false) => {
if (!touchedButton) { return; }
if (!currentTouchedButton) { return; }
const buttonToModify = touchedButton;
const buttonToModify = currentTouchedButton;
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({
@ -53,6 +67,7 @@ export const createButtonActiveGesture = (
onEnd: () => {
clearActiveButton(true);
hapticSelectionEnd();
initialTouchedButton = undefined;
}
});
};