[react-events] Tap: change order of events (#16694)

Before:

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

Now:

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

Author: necolas

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;
       }

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,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 => {
@@ -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 => {