From b8080ba775379dae13019ca348aa8f268b50f36a Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Tue, 13 Feb 2018 13:08:26 -0800 Subject: [PATCH] [fix] Touchable press events regression in 9ee89bc Fix a regression introduced by "ResponderEvent event filtering" 9ee89bc7f7e0548a930d37087caa63636d490fa2. Touchable press events were firing twice after the event normalization was moved up into 'extractEvents'. The reason is: 1) events were previously not normalized throughout the responder system 2) once they were normalized, the fix introduced by a535c558d8a70f8507751c751d029299719ec870 stopped working 3) because normalized nativeEvent did not include event data like 'cancelable'. This patch adds more of the original nativeEvent fields to the normalized event, so that React's synthetic event can return the correct information for 'bubbles', 'cancelable', 'isDefaultPrevented()', etc. --- .../__snapshots__/index-test.js.snap | 5 +++++ .../injectResponderEventPlugin/index.js | 1 + .../__snapshots__/index-test.js.snap | 20 +++++++++++++++++++ .../src/modules/normalizeNativeEvent/index.js | 14 +++++++++++-- 4 files changed, 38 insertions(+), 2 deletions(-) diff --git a/packages/react-native-web/src/exports/createElement/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/createElement/__tests__/__snapshots__/index-test.js.snap index 71a1ea2f..c86761eb 100644 --- a/packages/react-native-web/src/exports/createElement/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/createElement/__tests__/__snapshots__/index-test.js.snap @@ -3,7 +3,10 @@ exports[`modules/createElement it normalizes event.nativeEvent 1`] = ` Object { "_normalized": true, + "bubbles": undefined, + "cancelable": undefined, "changedTouches": Array [], + "defaultPrevented": undefined, "identifier": undefined, "locationX": undefined, "locationY": undefined, @@ -15,6 +18,8 @@ Object { "target": undefined, "timestamp": 1496876171255, "touches": Array [], + "type": undefined, + "which": undefined, } `; diff --git a/packages/react-native-web/src/modules/injectResponderEventPlugin/index.js b/packages/react-native-web/src/modules/injectResponderEventPlugin/index.js index 72435bc0..107bb2f4 100644 --- a/packages/react-native-web/src/modules/injectResponderEventPlugin/index.js +++ b/packages/react-native-web/src/modules/injectResponderEventPlugin/index.js @@ -52,6 +52,7 @@ ResponderEventPlugin.extractEvents = (topLevelType, targetInst, nativeEvent, nat } const normalizedEvent = normalizeNativeEvent(nativeEvent); + return originalExtractEvents.call( ResponderEventPlugin, topLevelType, diff --git a/packages/react-native-web/src/modules/normalizeNativeEvent/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/modules/normalizeNativeEvent/__tests__/__snapshots__/index-test.js.snap index 3d9b5744..9969cea4 100644 --- a/packages/react-native-web/src/modules/normalizeNativeEvent/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/modules/normalizeNativeEvent/__tests__/__snapshots__/index-test.js.snap @@ -3,6 +3,8 @@ exports[`modules/normalizeNativeEvent mouse events simulated event 1`] = ` Object { "_normalized": true, + "bubbles": undefined, + "cancelable": undefined, "changedTouches": Array [ Object { "_normalized": true, @@ -20,6 +22,7 @@ Object { "timestamp": 1496876171255, }, ], + "defaultPrevented": undefined, "identifier": 0, "locationX": undefined, "locationY": undefined, @@ -31,12 +34,16 @@ Object { "target": undefined, "timestamp": 1496876171255, "touches": Array [], + "type": "mouseup", + "which": undefined, } `; exports[`modules/normalizeNativeEvent mouse events synthetic event 1`] = ` Object { "_normalized": true, + "bubbles": undefined, + "cancelable": undefined, "changedTouches": Array [ Object { "_normalized": true, @@ -54,6 +61,7 @@ Object { "timestamp": 1496876171255, }, ], + "defaultPrevented": undefined, "identifier": 0, "locationX": 200, "locationY": 200, @@ -65,13 +73,18 @@ Object { "target": undefined, "timestamp": 1496876171255, "touches": Array [], + "type": "mouseup", + "which": undefined, } `; exports[`modules/normalizeNativeEvent touch events simulated event 1`] = ` Object { "_normalized": true, + "bubbles": undefined, + "cancelable": undefined, "changedTouches": Array [], + "defaultPrevented": undefined, "identifier": undefined, "locationX": undefined, "locationY": undefined, @@ -83,12 +96,16 @@ Object { "target": undefined, "timestamp": 1496876171255, "touches": Array [], + "type": "touchstart", + "which": undefined, } `; exports[`modules/normalizeNativeEvent touch events synthetic event 1`] = ` Object { "_normalized": true, + "bubbles": undefined, + "cancelable": undefined, "changedTouches": Array [ Object { "_normalized": true, @@ -109,6 +126,7 @@ Object { "timestamp": 1496876171255, }, ], + "defaultPrevented": undefined, "identifier": undefined, "locationX": undefined, "locationY": undefined, @@ -120,5 +138,7 @@ Object { "target": undefined, "timestamp": 1496876171255, "touches": Array [], + "type": "touchstart", + "which": undefined, } `; diff --git a/packages/react-native-web/src/modules/normalizeNativeEvent/index.js b/packages/react-native-web/src/modules/normalizeNativeEvent/index.js index 0af0a142..5c855f7c 100644 --- a/packages/react-native-web/src/modules/normalizeNativeEvent/index.js +++ b/packages/react-native-web/src/modules/normalizeNativeEvent/index.js @@ -73,7 +73,10 @@ function normalizeTouchEvent(nativeEvent) { const event = { _normalized: true, + bubbles: nativeEvent.bubbles, + cancelable: nativeEvent.cancelable, changedTouches, + defaultPrevented: nativeEvent.defaultPrevented, identifier: undefined, locationX: undefined, locationY: undefined, @@ -86,7 +89,9 @@ function normalizeTouchEvent(nativeEvent) { // normalize the timestamp // https://stackoverflow.com/questions/26177087/ios-8-mobile-safari-wrong-timestamp-on-touch-events timestamp: Date.now(), - touches + touches, + type: nativeEvent.type, + which: nativeEvent.which }; if (changedTouches[0]) { @@ -134,7 +139,10 @@ function normalizeMouseEvent(nativeEvent) { return { _normalized: true, + bubbles: nativeEvent.bubbles, + cancelable: nativeEvent.cancelable, changedTouches: touches, + defaultPrevented: nativeEvent.defaultPrevented, identifier: touches[0].identifier, locationX: nativeEvent.offsetX, locationY: nativeEvent.offsetY, @@ -145,7 +153,9 @@ function normalizeMouseEvent(nativeEvent) { stopPropagation, target: nativeEvent.target, timestamp: touches[0].timestamp, - touches: nativeEvent.type === 'mouseup' ? emptyArray : touches + touches: nativeEvent.type === 'mouseup' ? emptyArray : touches, + type: nativeEvent.type, + which: nativeEvent.which }; }