allow default TableRow keypress events (#221) (#276)

src/table/src/TableRow.js

@@ -54,11 +54,21 @@ export default class TableRow extends PureComponent {
     }
   }
 
+  onRef = node => {
+    this.node = node
+  }
+
   handleKeyPress = e => {
     if (this.props.isSelectable) {
       if (e.key === 'Enter' || e.key === ' ') {
         this.props.onSelect()
-        e.preventDefault()
+
+        // NOTE: In scenarios where the target for key press is our
+        // tabIndex <Pane> below, prevent the default event action
+        // so that browser scroll will not occur.
+        if (e.target === this.node) {
+          e.preventDefault()
+        }
       }
     }
 
@@ -83,6 +93,7 @@ export default class TableRow extends PureComponent {
 
     return (
       <Pane
+        innerRef={this.onRef}
         display="flex"
         {...(isSelectable
           ? {

src/table/stories/index.stories.js

@@ -89,6 +89,17 @@ storiesOf('table', module)
       <TableRow>TableRow</TableRow>
     </Box>
   ))
+  .add('TableRow isSelectable with nested UI', () => (
+    <Box padding={40}>
+      {(() => {
+        document.body.style.margin = '0'
+        document.body.style.height = '100vh'
+      })()}
+      <TableRow isSelectable>
+        <input type="text" placeholder="type a space" />
+      </TableRow>
+    </Box>
+  ))
   .add('TableHeaderCell', () => (
     <Box padding={40}>
       {(() => {