From 9ee89bc7f7e0548a930d37087caa63636d490fa2 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Mon, 12 Feb 2018 09:10:20 -0800 Subject: [PATCH] [fix] ResponderEventPlugin event filtering Exclude middle, wheel, and right click mouse events from the responder system. This fixes the Touchables incorrectly triggering 'onPress' in response to these events. Filter mousemove events in the 'extractEvents' methods, and check for active touches rather than the length of the touch bank. This fixes the PanResponder not functioning after the first touch in Firefox. Fix #719 Fix #729 Close #804 --- .../injectResponderEventPlugin/index.js | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/react-native-web/src/modules/injectResponderEventPlugin/index.js b/packages/react-native-web/src/modules/injectResponderEventPlugin/index.js index bb93e3a3..72435bc0 100644 --- a/packages/react-native-web/src/modules/injectResponderEventPlugin/index.js +++ b/packages/react-native-web/src/modules/injectResponderEventPlugin/index.js @@ -39,16 +39,26 @@ ResponderEventPlugin.eventTypes.selectionChangeShouldSetResponder.dependencies = ResponderEventPlugin.eventTypes.scrollShouldSetResponder.dependencies = [topScroll]; ResponderEventPlugin.eventTypes.startShouldSetResponder.dependencies = startDependencies; -const originalRecordTouchTrack = ResponderTouchHistoryStore.recordTouchTrack; - -ResponderTouchHistoryStore.recordTouchTrack = (topLevelType, nativeEvent) => { - // Filter out mouse-move events when the mouse button is not down - if (topLevelType === topMouseMove && !ResponderTouchHistoryStore.touchHistory.touchBank.length) { +const originalExtractEvents = ResponderEventPlugin.extractEvents; +ResponderEventPlugin.extractEvents = (topLevelType, targetInst, nativeEvent, nativeEventTarget) => { + const hasActiveTouches = ResponderTouchHistoryStore.touchHistory.numberActiveTouches > 0; + if ( + // Filter out mousemove events when there hasn't been a touch yet + (topLevelType === topMouseMove && !hasActiveTouches) || + // Filter out events from wheel/middle and right click. + (nativeEvent.button === 1 || nativeEvent.button === 2) + ) { return; } const normalizedEvent = normalizeNativeEvent(nativeEvent); - originalRecordTouchTrack.call(ResponderTouchHistoryStore, topLevelType, normalizedEvent); + return originalExtractEvents.call( + ResponderEventPlugin, + topLevelType, + targetInst, + normalizedEvent, + nativeEventTarget + ); }; EventPluginHub.injection.injectEventPluginsByName({