From 386a599fbc695c2c7cc6f605b6b88f7fb7a9eab0 Mon Sep 17 00:00:00 2001
From: Ben Gotow <bengotow@gmail.com>
Date: Fri, 4 Dec 2015 18:26:26 -0800
Subject: [PATCH] fix(keymaps): Listen to atom commands instead of DOM events

Using `addEventListener` only works when the command is triggered by the atom keymaps manager, NOT when the command is triggered by the command registry (NylasEnv.commands.dispatch). Odds are, when you subscribe to key commands you /really/ mean to subscribe to the command, no matter how it's invoked.

This fixes #556, in which the down / up arrows in the message list weren't working.
---
 .../thread-list/lib/thread-buttons.cjsx        |  2 ++
 src/components/key-commands-region.cjsx        | 18 ++++++------------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/internal_packages/thread-list/lib/thread-buttons.cjsx b/internal_packages/thread-list/lib/thread-buttons.cjsx
index 07748e080..bb0b1c8bf 100644
--- a/internal_packages/thread-list/lib/thread-buttons.cjsx
+++ b/internal_packages/thread-list/lib/thread-buttons.cjsx
@@ -150,6 +150,7 @@ DownButton = React.createClass
   _onClick: ->
     return if @state.disabled
     NylasEnv.commands.dispatch(document.body, 'core:next-item')
+    return
 
   _getStateFromStores: ->
     disabled: @isLastThread()
@@ -173,6 +174,7 @@ UpButton = React.createClass
   _onClick: ->
     return if @state.disabled
     NylasEnv.commands.dispatch(document.body, 'core:previous-item')
+    return
 
   _getStateFromStores: ->
     disabled: @isFirstThread()
diff --git a/src/components/key-commands-region.cjsx b/src/components/key-commands-region.cjsx
index 8d5d4fa29..de9f69453 100644
--- a/src/components/key-commands-region.cjsx
+++ b/src/components/key-commands-region.cjsx
@@ -113,22 +113,16 @@ class KeyCommandsRegion extends React.Component
   # particular scope, we simply need to listen at the root window level
   # here for all commands coming in.
   _setupListeners: (props) ->
-    _.each props.globalHandlers, (callback, handler) ->
-      window.addEventListener(handler, callback)
-
+    @_globalDisposable = NylasEnv.commands.add('body', props.globalHandlers)
     return unless @_mounted
     $el = React.findDOMNode(@)
-    _.each props.localHandlers, (callback, handler) ->
-      $el.addEventListener(handler, callback)
+    @_localDisposable = NylasEnv.commands.add($el, props.localHandlers)
 
   _unmountListeners: ->
-    _.each @props.globalHandlers, (callback, handler) ->
-      window.removeEventListener(handler, callback)
-
-    return unless @_mounted
-    $el = React.findDOMNode(@)
-    _.each @props.localHandlers, (callback, handler) ->
-      $el.removeEventListener(handler, callback)
+    @_globalDisposable?.dispose()
+    @_globalDisposable = null
+    @_localDisposable?.dispose()
+    @_localDisposable = null
 
   render: ->
     <div className="key-commands-region #{@props.className}">