[react-interactions] Prevent duplicate onPress firing for keyboard En…

…ter (#17266) * [react-interactions] Prevent duplicate onPress firing for keyboard Enter * address feedback
facebook · Nov 5, 2019 · cd1bdcd · cd1bdcd
1 parent 4f02c93
commit cd1bdcd
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/packages/react-interactions/events/src/dom/Press.js b/packages/react-interactions/events/src/dom/Press.js
@@ -97,7 +97,7 @@ function isValidKey(e): boolean {
   const {key, target} = e;
   const {tagName, isContentEditable} = (target: any);
   return (
-    (key === 'Enter' || key === ' ') &&
+    (key === 'Enter' || key === ' ' || key === 'Spacebar') &&
     (tagName !== 'INPUT' &&
       tagName !== 'TEXTAREA' &&
       isContentEditable !== true)
@@ -106,7 +106,10 @@ function isValidKey(e): boolean {
 
 function handlePreventDefault(preventDefault: ?boolean, e: any): void {
   const key = e.key;
-  if (preventDefault !== false && (key === ' ' || key === 'Enter')) {
+  if (
+    preventDefault !== false &&
+    (key === ' ' || key === 'Enter' || key === 'Spacebar')
+  ) {
     e.preventDefault();
   }
 }

diff --git a/packages/react-interactions/events/src/dom/PressLegacy.js b/packages/react-interactions/events/src/dom/PressLegacy.js
@@ -570,15 +570,14 @@ const pressResponderImpl = {
                 metaKey,
                 shiftKey,
               } = (nativeEvent: MouseEvent);
-              if (nativeEvent.key === ' ') {
-                nativeEvent.preventDefault();
-              } else if (
+              if (
                 props.preventDefault !== false &&
                 !shiftKey &&
                 !metaKey &&
                 !ctrlKey &&
                 !altKey
               ) {
+                nativeEvent.preventDefault();
                 state.shouldPreventClick = true;
               }
             } else {

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
@@ -914,8 +914,7 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
       ReactDOM.render(<Component />, container);
 
       const target = createEventTarget(ref.current);
-      target.keydown({key: 'Enter'});
-      target.click({preventDefault});
+      target.keydown({key: 'Enter', preventDefault});
       target.keyup({key: 'Enter'});
       expect(preventDefault).toBeCalled();
       expect(onPress).toHaveBeenCalledWith(