Pressability: Fix Missing onLongPress Gestures

Summary:
The current implementation of `Pressability` has a bug related to `onLongPress`.

When a user starts a press gesture, we keep track of the activation position (occurs after waiting `delayPressIn` milliseconds). If the touch moves away from that position by more than 10dp, we rule out the long press gesture. This means no matter how long you hold down the press, even if you move it back to within 10dp, we will not fire `onLongPress`.

However, there is currently a bug where we never reset the cached activation position. This means that after the first press gesture, all subsequent long press gestures must start within 10dp of that first press gesture. This leads to seemingly intermittent missing long press gestures.

This fixes the bug by ensuring that whenever a press gestures is terminated (either via a cancel or release), we reset the activation position.

Changelog:
[General][Fixed] - Fixed Pressability to properly fire `onLongPress`.

Reviewed By: TheSavior

Differential Revision: D20410075

fbshipit-source-id: e4727b7a9585ce3ea39481fc13e56b6b91740c8c
This commit is contained in:
Tim Yung
2020-03-18 16:54:46 +01:00
committed by grabbou
parent f6a8452e76
commit 1f8b698013
2 changed files with 91 additions and 2 deletions
+1
View File
@@ -602,6 +602,7 @@ export default class Pressability {
event: PressEvent,
): void {
if (isTerminalSignal(signal)) {
this._touchActivatePosition = null;
this._cancelLongPressDelayTimeout();
}
@@ -395,9 +395,97 @@ describe('Pressability', () => {
jest.advanceTimersByTime(1);
expect(config.onLongPress).toBeCalled();
});
});
// TODO: onLongPressShouldCancelPress tests
it('is called if touch moves within 10dp', () => {
mockUIManagerMeasure();
const {config, handlers} = createMockPressability();
handlers.onStartShouldSetResponder();
handlers.onResponderGrant(createMockPressEvent('onResponderGrant'));
handlers.onResponderMove(
createMockPressEvent({
registrationName: 'onResponderMove',
pageX: 0,
pageY: 0,
}),
);
jest.advanceTimersByTime(130);
handlers.onResponderMove(
// NOTE: Delta from (0, 0) is ~9.9 < 10.
createMockPressEvent({
registrationName: 'onResponderMove',
pageX: 7,
pageY: 7,
}),
);
jest.advanceTimersByTime(370);
expect(config.onLongPress).toBeCalled();
});
it('is not called if touch moves beyond 10dp', () => {
mockUIManagerMeasure();
const {config, handlers} = createMockPressability();
handlers.onStartShouldSetResponder();
handlers.onResponderGrant(createMockPressEvent('onResponderGrant'));
handlers.onResponderMove(
createMockPressEvent({
registrationName: 'onResponderMove',
pageX: 0,
pageY: 0,
}),
);
jest.advanceTimersByTime(130);
handlers.onResponderMove(
createMockPressEvent({
registrationName: 'onResponderMove',
// NOTE: Delta from (0, 0) is ~10.6 > 10.
pageX: 7,
pageY: 8,
}),
);
jest.advanceTimersByTime(370);
expect(config.onLongPress).not.toBeCalled();
});
it('is called independent of preceding long touch gesture', () => {
mockUIManagerMeasure();
const {config, handlers} = createMockPressability();
handlers.onStartShouldSetResponder();
handlers.onResponderGrant(createMockPressEvent('onResponderGrant'));
handlers.onResponderMove(
createMockPressEvent({
registrationName: 'onResponderMove',
pageX: 0,
pageY: 0,
}),
);
jest.advanceTimersByTime(500);
expect(config.onLongPress).toHaveBeenCalledTimes(1);
handlers.onResponderRelease(createMockPressEvent('onResponderRelease'));
// Subsequent long touch gesture should not carry over previous state.
handlers.onStartShouldSetResponder();
handlers.onResponderGrant(createMockPressEvent('onResponderGrant'));
handlers.onResponderMove(
// NOTE: Delta from (0, 0) is ~10.6 > 10, but should not matter.
createMockPressEvent({
registrationName: 'onResponderMove',
pageX: 7,
pageY: 8,
}),
);
jest.advanceTimersByTime(500);
expect(config.onLongPress).toHaveBeenCalledTimes(2);
});
});
describe('onPress', () => {
it('is called even when `measure` does not finish', () => {