diff --git a/packages/react-native-gesture-handler/src/handlers/gestures/gestureStateManager.web.ts b/packages/react-native-gesture-handler/src/handlers/gestures/gestureStateManager.web.ts index e45da69822..5d55723806 100644 --- a/packages/react-native-gesture-handler/src/handlers/gestures/gestureStateManager.web.ts +++ b/packages/react-native-gesture-handler/src/handlers/gestures/gestureStateManager.web.ts @@ -1,3 +1,4 @@ +import { State } from '../../State'; import NodeManager from '../../web/tools/NodeManager'; import { GestureStateManagerType } from './gestureStateManager'; @@ -11,7 +12,15 @@ export const GestureStateManager = { }, activate: () => { - NodeManager.getHandler(handlerTag).activate(true); + const handler = NodeManager.getHandler(handlerTag); + + // Force going from UNDETERMINED to ACTIVE through BEGAN to preserve + // the correct state transition flow. + if (handler.state === State.UNDETERMINED) { + handler.begin(); + } + + handler.activate(true); }, fail: () => { diff --git a/packages/react-native-gesture-handler/src/web/handlers/FlingGestureHandler.ts b/packages/react-native-gesture-handler/src/web/handlers/FlingGestureHandler.ts index 15eb33cdc1..2d4a80caa8 100644 --- a/packages/react-native-gesture-handler/src/web/handlers/FlingGestureHandler.ts +++ b/packages/react-native-gesture-handler/src/web/handlers/FlingGestureHandler.ts @@ -125,8 +125,6 @@ export default class FlingGestureHandler extends GestureHandler { super.onPointerDown(event); this.newPointerAction(); - - this.tryToSendTouchEvent(event); } protected override onPointerAdd(event: AdaptedEvent): void { diff --git a/packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts b/packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts index 23f4560369..b3e22ff3a9 100644 --- a/packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts +++ b/packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts @@ -313,7 +313,7 @@ export default abstract class GestureHandler implements IGestureHandler { GestureHandlerOrchestrator.instance.cancelMouseAndPenGestures(this); } - // TODO: Bring back touch events along with introducing `handleDown` method that will handle handler specific stuff + this.tryToSendTouchEvent(event); } // Adding another pointer to existing ones protected onPointerAdd(event: AdaptedEvent): void { @@ -347,9 +347,9 @@ export default abstract class GestureHandler implements IGestureHandler { protected onPointerEnter(event: AdaptedEvent): void { this.tryToSendTouchEvent(event); } - protected onPointerCancel(event: AdaptedEvent): void { - this.tryToSendTouchEvent(event); - + protected onPointerCancel(_event: AdaptedEvent): void { + // No need to send a cancel touch event explicitly here. `cancel` will + // handle cancelling all tracked touches if the handler expects pointer data. this.cancel(); this.reset(); } @@ -370,11 +370,10 @@ export default abstract class GestureHandler implements IGestureHandler { return; } + this.tryToSendTouchEvent(event); if (this.active) { this.sendEvent(this.state, this.state); } - - this.tryToSendTouchEvent(event); } protected tryToSendTouchEvent(event: AdaptedEvent): void { diff --git a/packages/react-native-gesture-handler/src/web/handlers/LongPressGestureHandler.ts b/packages/react-native-gesture-handler/src/web/handlers/LongPressGestureHandler.ts index 691e6c4d2b..fe410f8988 100644 --- a/packages/react-native-gesture-handler/src/web/handlers/LongPressGestureHandler.ts +++ b/packages/react-native-gesture-handler/src/web/handlers/LongPressGestureHandler.ts @@ -91,8 +91,6 @@ export default class LongPressGestureHandler extends GestureHandler { this.tryBegin(); this.tryActivate(); - - this.tryToSendTouchEvent(event); } protected override onPointerAdd(event: AdaptedEvent): void { super.onPointerAdd(event); diff --git a/packages/react-native-gesture-handler/src/web/handlers/ManualGestureHandler.ts b/packages/react-native-gesture-handler/src/web/handlers/ManualGestureHandler.ts index 4e2e96e043..512fd7676a 100644 --- a/packages/react-native-gesture-handler/src/web/handlers/ManualGestureHandler.ts +++ b/packages/react-native-gesture-handler/src/web/handlers/ManualGestureHandler.ts @@ -16,8 +16,6 @@ export default class ManualGestureHandler extends GestureHandler { this.tracker.addToTracker(event); super.onPointerDown(event); this.begin(); - - this.tryToSendTouchEvent(event); } protected override onPointerAdd(event: AdaptedEvent): void { diff --git a/packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts b/packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts index cff2c5f1bf..0e492c5198 100644 --- a/packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts +++ b/packages/react-native-gesture-handler/src/web/handlers/NativeViewGestureHandler.ts @@ -74,8 +74,6 @@ export default class NativeViewGestureHandler extends GestureHandler { this.tracker.addToTracker(event); super.onPointerDown(event); this.newPointerAction(); - - this.tryToSendTouchEvent(event); } protected override onPointerAdd(event: AdaptedEvent): void { diff --git a/packages/react-native-gesture-handler/src/web/handlers/PanGestureHandler.ts b/packages/react-native-gesture-handler/src/web/handlers/PanGestureHandler.ts index 9b74183315..9fade0507d 100644 --- a/packages/react-native-gesture-handler/src/web/handlers/PanGestureHandler.ts +++ b/packages/react-native-gesture-handler/src/web/handlers/PanGestureHandler.ts @@ -230,8 +230,6 @@ export default class PanGestureHandler extends GestureHandler { this.tryBegin(event); this.checkBegan(); - - this.tryToSendTouchEvent(event); } protected override onPointerAdd(event: AdaptedEvent): void { diff --git a/packages/react-native-gesture-handler/src/web/handlers/PinchGestureHandler.ts b/packages/react-native-gesture-handler/src/web/handlers/PinchGestureHandler.ts index 715d72f6c0..9c9bf1f2c0 100644 --- a/packages/react-native-gesture-handler/src/web/handlers/PinchGestureHandler.ts +++ b/packages/react-native-gesture-handler/src/web/handlers/PinchGestureHandler.ts @@ -81,8 +81,6 @@ export default class PinchGestureHandler extends GestureHandler { protected override onPointerDown(event: AdaptedEvent): void { this.tracker.addToTracker(event); super.onPointerDown(event); - - this.tryToSendTouchEvent(event); } protected override onPointerAdd(event: AdaptedEvent): void { diff --git a/packages/react-native-gesture-handler/src/web/handlers/RotationGestureHandler.ts b/packages/react-native-gesture-handler/src/web/handlers/RotationGestureHandler.ts index d13345af62..6dd8b4dd47 100644 --- a/packages/react-native-gesture-handler/src/web/handlers/RotationGestureHandler.ts +++ b/packages/react-native-gesture-handler/src/web/handlers/RotationGestureHandler.ts @@ -89,8 +89,6 @@ export default class RotationGestureHandler extends GestureHandler { protected override onPointerDown(event: AdaptedEvent): void { this.tracker.addToTracker(event); super.onPointerDown(event); - - this.tryToSendTouchEvent(event); } protected override onPointerAdd(event: AdaptedEvent): void { diff --git a/packages/react-native-gesture-handler/src/web/handlers/TapGestureHandler.ts b/packages/react-native-gesture-handler/src/web/handlers/TapGestureHandler.ts index faa95cd861..7a06db4b68 100644 --- a/packages/react-native-gesture-handler/src/web/handlers/TapGestureHandler.ts +++ b/packages/react-native-gesture-handler/src/web/handlers/TapGestureHandler.ts @@ -134,8 +134,6 @@ export default class TapGestureHandler extends GestureHandler { this.lastY = event.y; this.updateState(event); - - this.tryToSendTouchEvent(event); } protected override onPointerAdd(event: AdaptedEvent): void { diff --git a/packages/react-native-gesture-handler/src/web/tools/GestureHandlerOrchestrator.ts b/packages/react-native-gesture-handler/src/web/tools/GestureHandlerOrchestrator.ts index fc63ab1c6d..b0b27d96ec 100644 --- a/packages/react-native-gesture-handler/src/web/tools/GestureHandlerOrchestrator.ts +++ b/packages/react-native-gesture-handler/src/web/tools/GestureHandlerOrchestrator.ts @@ -20,7 +20,9 @@ export default class GestureHandlerOrchestrator { private scheduleFinishedHandlersCleanup(): void { if (this.handlingChangeSemaphore === 0) { - this.cleanupFinishedHandlers(); + queueMicrotask(() => { + this.cleanupFinishedHandlers(); + }); } }