     document.addEventListener 'mousedown', @handleOutsideMouseClick
 
 
+  handleOutsideMouseClick: (e) =>
+
+    return  unless @refs.AllParticipantsMenu
+
+    target             = e.target
+    moreButtonEl       = @refs.showMoreButton.getDOMNode()
+    participantsMenuEl = @refs.AllParticipantsMenu.getDOMNode()
+
+    if ((@isNodeInContainer target, moreButtonEl) or (@isNodeInContainer target, participantsMenuEl))
+      return
+
+    e.stopPropagation()
+    @setState showAllParticipants: no
+
 
   isNodeInContainer: (el, container) ->
     while el

    moreCount = Math.min moreCount, 99

    <div className='ChannelParticipantAvatars-singleBox'>
      <div className='ChannelParticipantAvatars-moreCount' onClick={@bound 'onShowMoreParticipantButtonClick'}>
        {moreCount}+
      </div>
    </div>

    else @setState addNewParticipantMode: yes


  onShowMoreParticipantButtonClick: (e) ->

    e.stopPropagation()
    if @state.showAllParticipants is yes
    then @setState showAllParticipants: no
    else @setState showAllParticipants: yes
