fix(prefs): Prevent main key commands from being fired to thread list while on prefs page

Summary:
- When the preferences sheet is open, any commands triggered through key presses were being received by the thread-list, producing unexpected
(and unseen) results
- This is a partial/temporary solution and should go away when we do the Keymap/Commands/Menu refactor

Test Plan: - Manaul

Reviewers: evan, bengotow

Reviewed By: bengotow

Differential Revision: https://phab.nylas.com/D2380

internal_packages/preferences/lib/preferences-root.cjsx

@@ -3,7 +3,8 @@ _ = require 'underscore'
 {RetinaImg,
  Flexbox,
  ConfigPropContainer,
- ScrollRegion} = require 'nylas-component-kit'
+ ScrollRegion,
+ KeyCommandsRegion}  = require 'nylas-component-kit'
 {PreferencesUIStore} = require 'nylas-exports'
 
 PreferencesSidebar = require './preferences-sidebar'
@@ -16,6 +17,7 @@ class PreferencesRoot extends React.Component
     @state = @getStateFromStores()
 
   componentDidMount: =>
+    React.findDOMNode(@).focus()
     @unlisteners = []
     @unlisteners.push PreferencesUIStore.listen =>
       @setState(@getStateFromStores())
@@ -23,6 +25,29 @@ class PreferencesRoot extends React.Component
   componentWillUnmount: =>
     unlisten() for unlisten in @unlisteners
 
+  _localHandlers: ->
+    stopPropagation = (e) -> e.stopPropagation()
+    # This prevents some basic commands from propagating to the threads list and
+    # producing unexpected results
+    #
+    # TODO This is a partial/temporary solution and should go away when we do the
+    # Keymap/Commands/Menu refactor
+    return {
+      'core:next-item': stopPropagation
+      'core:previous-item': stopPropagation
+      'core:select-up': stopPropagation
+      'core:select-down': stopPropagation
+      'core:select-item': stopPropagation
+      'core:remove-from-view': stopPropagation
+      'core:messages-page-up': stopPropagation
+      'core:messages-page-down': stopPropagation
+      'core:list-page-up': stopPropagation
+      'core:list-page-down': stopPropagation
+      'application:archive-item': stopPropagation
+      'application:delete-item': stopPropagation
+      'application:print-thread': stopPropagation
+    }
+
   getStateFromStores: =>
     tabs: PreferencesUIStore.tabs()
     selection: PreferencesUIStore.selection()
@@ -36,12 +61,14 @@ class PreferencesRoot extends React.Component
     else
       bodyElement = <div></div>
 
-    <Flexbox direction="row" className="preferences-wrap">
-      <PreferencesSidebar tabs={@state.tabs}
-                          selection={@state.selection} />
-      <ScrollRegion className="preferences-content">
-        <ConfigPropContainer>{bodyElement}</ConfigPropContainer>
-      </ScrollRegion>
-    </Flexbox>
+    <KeyCommandsRegion className="preferences-wrap" tabIndex="1" localHandlers={@_localHandlers()}>
+      <Flexbox direction="row">
+        <PreferencesSidebar tabs={@state.tabs}
+                            selection={@state.selection} />
+        <ScrollRegion className="preferences-content">
+          <ConfigPropContainer>{bodyElement}</ConfigPropContainer>
+        </ScrollRegion>
+      </Flexbox>
+    </KeyCommandsRegion>
 
 module.exports = PreferencesRoot

src/components/key-commands-region.cjsx

@@ -125,7 +125,8 @@ class KeyCommandsRegion extends React.Component
     @_localDisposable = null
 
   render: ->
-    <div className="key-commands-region #{@props.className}">
+    otherProps = _.omit(@props, _.keys(@constructor.propTypes))
+    <div className="key-commands-region #{@props.className}" {...otherProps}>
       {@props.children}
     </div>