     moreCount = Math.min moreCount, 99
 
     <div className='ChannelParticipantAvatars-singleBox'>
-      <div className='ChannelParticipantAvatars-moreCount' onClick={@bound 'onShowMoreParticipantButtonClick'}>
+      <div className='ChannelParticipantAvatars-moreCount' ref='showMoreButton' onClick={@bound 'onShowMoreParticipantButtonClick'}>
         {moreCount}+
       </div>
     </div>


    { participants } = @props

    <div className='ChannelParticipantAvatars-allParticipantsMenu'>
      <div className='ChannelParticipantAvatars-allParticipantsMenuContainer'>
        <div className='ChannelParticipantAvatars-allParticipantsMenuTitle'>Other participants</div>
        {@renderAvatars(participants, yes)}

    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
