fix(components): Make preventDefault call in HandleKeypress opt-in (#…

…1768) Closes #1764
Opentrons · Jun 28, 2018 · 9e64fb2 · 9e64fb2
1 parent a15c30a
commit 9e64fb2
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/app/src/components/JogControls/index.js b/app/src/components/JogControls/index.js
@@ -83,18 +83,21 @@ export default class JogControls extends React.Component<JogControlsProps> {
     const {step, onStepSelect} = this.props
 
     return (
-      <HandleKeypress handlers={[
-        {key: 'ArrowLeft', shiftKey: false, onPress: jogHandlers.left},
-        {key: 'ArrowRight', shiftKey: false, onPress: jogHandlers.right},
-        {key: 'ArrowUp', shiftKey: false, onPress: jogHandlers.back},
-        {key: 'ArrowDown', shiftKey: false, onPress: jogHandlers.forward},
-        {key: 'ArrowUp', shiftKey: true, onPress: jogHandlers.up},
-        {key: 'ArrowDown', shiftKey: true, onPress: jogHandlers.down},
-        {key: '-', onPress: this.decreaseStepSize},
-        {key: '_', onPress: this.decreaseStepSize},
-        {key: '=', onPress: this.increaseStepSize},
-        {key: '+', onPress: this.increaseStepSize}
-      ]}>
+      <HandleKeypress
+        preventDefault
+        handlers={[
+          {key: 'ArrowLeft', shiftKey: false, onPress: jogHandlers.left},
+          {key: 'ArrowRight', shiftKey: false, onPress: jogHandlers.right},
+          {key: 'ArrowUp', shiftKey: false, onPress: jogHandlers.back},
+          {key: 'ArrowDown', shiftKey: false, onPress: jogHandlers.forward},
+          {key: 'ArrowUp', shiftKey: true, onPress: jogHandlers.up},
+          {key: 'ArrowDown', shiftKey: true, onPress: jogHandlers.down},
+          {key: '-', onPress: this.decreaseStepSize},
+          {key: '_', onPress: this.decreaseStepSize},
+          {key: '=', onPress: this.increaseStepSize},
+          {key: '+', onPress: this.increaseStepSize}
+        ]}
+      >
         {JOG_BUTTON_NAMES.map(name => (
           <JogButton
             key={name}

diff --git a/components/src/interaction-enhancers/HandleKeypress.js b/components/src/interaction-enhancers/HandleKeypress.js
@@ -12,6 +12,8 @@ type KeypressHandler = {
 type Props = {
   /** array of keypress handlers to attach to the window */
   handlers: Array<KeypressHandler>,
+  /** optionally call event.preventDefault if keypress is handled */
+  preventDefault?: ?boolean,
   /** wrapped children */
   children?: React.Node,
 }
@@ -24,7 +26,8 @@ const matchHandler = e => h => (
 /**
  * Keypress handler wrapper component. Takes an array of keypress handlers
  * to call when a given key is pressed on the keyboard. Handler is called on
- * `keyup` event. `event.preventDefault` will be called if a key is handled.
+ * `keyup` event. `event.preventDefault` will be called if a key is handled
+ * and `props.preventDefault` is true.
  */
 export default class HandleKeypress extends React.Component<Props> {
   handlePressIfKey = (event: KeypressEvent) => {
@@ -34,6 +37,8 @@ export default class HandleKeypress extends React.Component<Props> {
   }
 
   preventDefaultIfKey = (event: KeypressEvent) => {
+    if (!this.props.preventDefault) return
+
     const pressHandled = this.props.handlers.some(matchHandler(event))
 
     if (pressHandled) event.preventDefault()