fix(T2138): Clicking the area "around" the arrow inside the button doesn't trigger it

Fixes T2138

internal_packages/message-list/lib/message-controls.cjsx

@@ -11,26 +11,26 @@ class MessageControls extends React.Component
   constructor: (@props) ->
 
   render: =>
+    button = []
+
+    if @_replyType() is "reply"
+      button = <ButtonDropdown
+        primaryItem={<RetinaImg name="reply-footer.png" mode={RetinaImg.Mode.ContentIsMask}/>}
+        primaryClick={@_onReply}
+        secondaryItems={@_secondaryMessageActions()}/>
+    else
+      button = <ButtonDropdown
+        primaryItem={<RetinaImg name="reply-all-footer.png" mode={RetinaImg.Mode.ContentIsMask}/>}
+        primaryClick={@_onReplyAll}
+        secondaryItems={@_secondaryMessageActions()}/>
+
     <div className="message-actions-wrap">
       <div className="message-actions-ellipsis" onClick={@_onShowActionsMenu}>
         <RetinaImg name={"message-actions-ellipsis.png"} mode={RetinaImg.Mode.ContentIsMask}/>
       </div>
-
-      <ButtonDropdown
-        primaryItem={@_primaryMessageAction()}
-        secondaryItems={@_secondaryMessageActions()}/>
+      {button}
     </div>
 
-  _primaryMessageAction: =>
-    if @_replyType() is "reply"
-      <span onClick={@_onReply}>
-        <RetinaImg name="reply-footer.png" mode={RetinaImg.Mode.ContentIsMask}/>
-      </span>
-    else # if "reply-all"
-      <span onClick={@_onReplyAll}>
-        <RetinaImg name="reply-all-footer.png" mode={RetinaImg.Mode.ContentIsMask}/>
-      </span>
-
   _secondaryMessageActions: ->
     if @_replyType() is "reply"
       return [@_replyAllAction(), @_forwardAction()]

src/components/button-dropdown.cjsx

@@ -6,6 +6,7 @@ class ButtonDropdown extends React.Component
   @displayName: "MessageControls"
   @propTypes:
     primaryItem: React.PropTypes.element
+    primaryClick: React.PropTypes.func
     secondaryItems: React.PropTypes.arrayOf(React.PropTypes.element)
 
   constructor: (@props) ->
@@ -13,7 +14,7 @@ class ButtonDropdown extends React.Component
 
   render: =>
     <div ref="button" onBlur={@_onBlur} tabIndex={999} className="#{@props.className ? ''} button-dropdown" >
-      <div className="primary-item">
+      <div className="primary-item" onClick={@props.primaryClick}>
         {@props.primaryItem}
       </div>
       <div className="secondary-picker" onClick={@_toggleDropdown}>