             # use or condition for top and bottom
             if (y >= d.y && y <= d.y + d.height) || (y + 10 >= d.y && y + 10 <= d.y + d.height)
               d3.select(this).classed('key--selected', true)
-              #self.timeline.selectionManager.select(this, true)
               selection.push(this)
 
         self.timeline.selectionManager.select(selection)
 
-      ).on("mouseup", () ->
-        self.linesContainer.selectAll('.selection').remove()
-        # Enable again the default browser text selection.
-        $('body').css({
-          'user-select': 'all'
-        })
-      )+      )
+      # Attach the mouseup event to window so that it catch it event if
+      # mouseup happen outside of the browser window.
+      $(window).on("mouseup", @onMouseUp)

          'user-select': 'none'
        })
      ).on("mousemove", () ->
        s = self.linesContainer.select('.selection')
        if s.empty() then return
        p = d3.mouse(this)
        margin: self.margin

define (require) ->
  class Selection
    constructor: (@timeline, @svg, @margin) ->
      @init()

    onMouseUp: (e) =>
      @svg.selectAll('.selection').remove()
      # Enable again the default browser text selection.
      $('body').css({
        'user-select': 'all'
      })

    init: () ->
      self = this
      @svg.on("mousedown", () ->
        p = d3.mouse(this)
        self.svg.append('rect')
          .attr({
            rx: 6,
            ry: 6,
