Skip to content

Commit

Permalink
[react-events] Tap: change order of events (#16694)
Browse files Browse the repository at this point in the history
Before:

start -> change -> update -> end (cancel) -> change

Now:

start -> change -> update -> change -> end (cancel)
  • Loading branch information
necolas authored Sep 9, 2019
1 parent f26fe8c commit 031eba7
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 8 deletions.
8 changes: 4 additions & 4 deletions packages/react-events/src/dom/Tap.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand All @@ -582,8 +584,6 @@ const responderImpl = {
} else {
dispatchCancel(context, props, state);
}
state.isActive = false;
dispatchChange(context, props, state);
}

if (!hasPointerEvents) {
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand Down
24 changes: 20 additions & 4 deletions packages/react-events/src/dom/__tests__/Tap-test.internal.js
Original file line number Diff line number Diff line change
Expand Up @@ -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});
}
Expand Down Expand Up @@ -450,26 +450,41 @@ 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 <div ref={ref} listeners={listener} />;
};
ReactDOM.render(<Component />, container);
document.elementFromPoint = () => ref.current;
});

testWithPointerType('pointer down/up', pointerType => {
const target = createEventTarget(ref.current);
target.pointerdown({pointerType});
expect(onTapChange).toHaveBeenCalledTimes(1);
expect(onTapChange).toHaveBeenCalledWith(true);
target.pointerup({pointerType});
target.pointerup({pointerType, x: 0, y: 0});
expect(onTapChange).toHaveBeenCalledTimes(2);
expect(onTapChange).toHaveBeenCalledWith(false);
expect(eventsLog).toEqual(['start', 'change', 'change', 'end']);
});

testWithPointerType('pointer cancel', pointerType => {
Expand All @@ -480,6 +495,7 @@ describeWithPointerEvent('Tap responder', hasPointerEvents => {
target.pointercancel({pointerType});
expect(onTapChange).toHaveBeenCalledTimes(2);
expect(onTapChange).toHaveBeenCalledWith(false);
expect(eventsLog).toEqual(['start', 'change', 'change', 'cancel']);
});

testWithPointerType('pointer move outside target', pointerType => {
Expand Down

0 comments on commit 031eba7

Please sign in to comment.