Skip to content

Commit 0b36e9d

Browse files
[Web] Start hover on the first pointer move when pointerenter was missed (#4624)
## Description On web, `HoverGestureHandler` begins only on the DOM `pointerenter` event. The v3 detector attaches its pointer listeners in an effect, after paint, so when the view mounts under a pointer that is already resting there, `pointerenter` fires before the listeners exist. The hover then never begins, even though `pointermove` events keep arriving, until the pointer leaves the view and enters it again. `onPointerMove` now begins the hover (through `onPointerMoveOver`) when the handler is still `UNDETERMINED`, so the first move over the view starts the gesture. This was found while migrating Expensify's charts to the hook API in Expensify/App#103457: the chart tooltip didn't show when the cursor was already over the chart before it was drawn ([report](Expensify/App#103457 (comment)), [investigation](Expensify/App#103457 (comment))). ## Test plan Tested in Expensify/App#103457, where the same change is applied to `3.3.0` as a [patch](https://github.com/software-mansion-labs/expensify-app-fork/blob/22686449e25d5f2c6dbe245aca37bdcf515bd9d4/patches/react-native-gesture-handler/react-native-gesture-handler%2B3.3.0%2B001%2Bstart-hover-on-pointer-move.patch): on web, quickly switching charts in the Insights card while keeping the cursor over the chart area, the tooltip of the newly drawn chart shows on the first mouse move, without leaving and re-entering the chart. Video of the fix is in [this comment](Expensify/App#103457 (comment)). --------- Co-authored-by: Michał Bert <63123542+m-bert@users.noreply.github.com>
1 parent 40ac206 commit 0b36e9d

1 file changed

Lines changed: 6 additions & 0 deletions

File tree

‎packages/react-native-gesture-handler/src/web/handlers/HoverGestureHandler.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,12 @@ export default class HoverGestureHandler extends GestureHandler {
5252
this.tracker.track(event);
5353
this.stylusData = event.stylusData;
5454

55+
// `pointerenter` may fire before listeners are attached
56+
if (this.state === State.UNDETERMINED) {
57+
this.onPointerMoveOver(event);
58+
return;
59+
}
60+
5561
super.onPointerMove(event);
5662
}
5763
}

0 commit comments

Comments
 (0)