diff --git a/packages/react-events/src/dom/Tap.js b/packages/react-events/src/dom/Tap.js index fe5ce0d91e655..2eb35938dbd21 100644 --- a/packages/react-events/src/dom/Tap.js +++ b/packages/react-events/src/dom/Tap.js @@ -573,6 +573,8 @@ const responderImpl = { state.gestureState = createGestureState(context, props, state, event); + state.isActive = false; + dispatchChange(context, props, state); if (context.isTargetWithinResponder(hitTarget)) { // Determine whether to call preventDefault on subsequent native events. if (isModifiedTap(event)) { @@ -582,8 +584,6 @@ const responderImpl = { } else { dispatchCancel(context, props, state); } - state.isActive = false; - dispatchChange(context, props, state); } if (!hasPointerEvents) { @@ -601,9 +601,9 @@ const responderImpl = { case 'dragstart': { if (state.isActive && isActivePointer(event, state)) { state.gestureState = createGestureState(context, props, state, event); - dispatchCancel(context, props, state); state.isActive = false; dispatchChange(context, props, state); + dispatchCancel(context, props, state); } break; } @@ -620,9 +620,9 @@ const responderImpl = { context.isTargetWithinNode(state.responderTarget, nativeEvent.target) ) { state.gestureState = createGestureState(context, props, state, event); - dispatchCancel(context, props, state); state.isActive = false; dispatchChange(context, props, state); + dispatchCancel(context, props, state); } break; } diff --git a/packages/react-events/src/dom/__tests__/Tap-test.internal.js b/packages/react-events/src/dom/__tests__/Tap-test.internal.js index bd8c051fe52fd..b623f1b3d7c35 100644 --- a/packages/react-events/src/dom/__tests__/Tap-test.internal.js +++ b/packages/react-events/src/dom/__tests__/Tap-test.internal.js @@ -47,8 +47,8 @@ function tapAndMoveOutside({ // NOTE: this assumes the PointerEvent implementation calls // 'releasePointerCapture' for touch pointers if (!hasPointerEvents && pointerType === 'touch') { - downTarget.pointermove({pointerType, ...coordinatesOutside}); document.elementFromPoint = () => upTarget.node; + downTarget.pointermove({pointerType, ...coordinatesOutside}); } else { upTarget.pointermove({pointerType, ...coordinatesOutside}); } @@ -450,16 +450,30 @@ describeWithPointerEvent('Tap responder', hasPointerEvents => { }); describe('onTapChange', () => { - let onTapChange, ref; + let eventsLog, onTapChange, ref; + + const logger = msg => () => { + eventsLog.push(msg); + }; beforeEach(() => { + eventsLog = []; onTapChange = jest.fn(); ref = React.createRef(); const Component = () => { - const listener = useTap({onTapChange}); + const listener = useTap({ + onTapChange(e) { + logger('change')(); + onTapChange(e); + }, + onTapStart: logger('start'), + onTapEnd: logger('end'), + onTapCancel: logger('cancel'), + }); return
; }; ReactDOM.render(