     {afterTabsItem} = @props
     periodsItems = _.map(sortedPeriods, @renderPeriod)
 
-    <BS.Nav bsStyle='tabs' activeKey={active} onSelect={@onSelect}>
+    <BS.Nav bsStyle='tabs' activeKey={active} onSelect={@onTabSelection}>
       {periodsItems}
       {afterTabsItem?()}
     </BS.Nav>

    CourseStore.off('course.loaded', @selectPeriod)

  componentWillReceiveProps: (nextProps) ->
    @setSortedPeriods(nextProps.periods)

  setSortedPeriods: (periods) ->


  selectPeriod: (courseId) ->
    if courseId is @props.courseId
      @onTabSelection(@state.active)

  onTabSelection: (key) ->
    {sortedPeriods} = @state
    @context.router.transitionTo(@context.router.getCurrentPathname(), {}, {tab: key})
    @updateTabSelectionState(key)

  updateTabSelectionState: (active) ->
    return if @state.active is active

    {courseId, handleSelect, handleKeyUpdate} = @props

    period = @state.sortedPeriods[active]
    unless period?
      throw new Error("BUG: #{key} period does not exist for course #{courseId}. There are only #{periods.length}.")
      return

    @setState({active})
    handleSelect?(period)

  renderPeriod: (period, key) ->
    className = classnames({'is-trouble': period.is_trouble})
