[react-interactions] Make events non-passive to allow preventDefault (#…

…17136)
facebook · Oct 21, 2019 · f7ec65e · f7ec65e
1 parent 1022ee0
commit f7ec65e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/packages/react-interactions/events/src/dom/PressLegacy.js b/packages/react-interactions/events/src/dom/PressLegacy.js
@@ -114,11 +114,18 @@ const DEFAULT_PRESS_RETENTION_OFFSET = {
 };
 
 const targetEventTypes = hasPointerEvents
-  ? ['keydown_active', 'pointerdown', 'click_active']
-  : ['keydown_active', 'touchstart', 'mousedown', 'click_active'];
+  ? ['keydown_active', 'pointerdown_active', 'click_active']
+  : ['keydown_active', 'touchstart', 'mousedown_active', 'click_active'];
 
 const rootEventTypes = hasPointerEvents
-  ? ['pointerup', 'pointermove', 'pointercancel', 'click', 'keyup', 'scroll']
+  ? [
+      'pointerup_active',
+      'pointermove',
+      'pointercancel',
+      'click',
+      'keyup',
+      'scroll',
+    ]
   : [
       'click',
       'keyup',
@@ -128,7 +135,7 @@ const rootEventTypes = hasPointerEvents
       'touchcancel',
       // Used as a 'cancel' signal for mouse interactions
       'dragstart',
-      'mouseup',
+      'mouseup_active',
       'touchend',
     ];
 

diff --git a/packages/react-interactions/events/src/dom/__tests__/PressLegacy-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/PressLegacy-test.internal.js
@@ -1134,11 +1134,13 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
 
   it('event.preventDefault works as expected', () => {
     const onPress = jest.fn(e => e.preventDefault());
+    const onPressStart = jest.fn(e => e.preventDefault());
+    const onPressEnd = jest.fn(e => e.preventDefault());
     const preventDefault = jest.fn();
     const buttonRef = React.createRef();
 
     const Component = () => {
-      const listener = usePress({onPress});
+      const listener = usePress({onPress, onPressStart, onPressEnd});
       return <button ref={buttonRef} listeners={listener} />;
     };
     ReactDOM.render(<Component />, container);
@@ -1147,5 +1149,7 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
     target.pointerdown();
     target.pointerup({preventDefault});
     expect(preventDefault).toBeCalled();
+    expect(onPressStart).toBeCalled();
+    expect(onPressEnd).toBeCalled();
   });
 });