Input is only autofocused the first time

I am still learning Ember and have encountered a problem with keep consistent behavior when showing/hidding certain elements in the template. I have the following controller

import Ember from 'ember';

export default Ember.ArrayController.extend({

  actions: {

    newCalendar: function() {
      this.set('showCalendarForm', true);
    },

    hideNewCalendar: function() {
      this.set('showCalendarForm', false);
      this.set('calendarName', '');
    },
    showCalendarForm: false,

    createCalendar: function() {
      var name = this.get('calendarName');

      if (!name) { return; }
      if (!name.trim()) { return; }

      var calendar = this.store.createRecord('calendar', {
        name: name
      });

      this.set('calendarName', '');
      this.set('showCalendarForm', false);
      calendar.save();
    },
  }

});

and a template

{{#if showCalendarForm}}
        <div class="input-group">
          {{input
            class       = 'form-control'
            id          = 'newCalendar'
            type        = 'text'
            placeholder = 'New calendar'
            value       = calendarName
            autofocus   = 'autofocus'
            focus-out   = 'hideNewCalendar'
            action      = 'createCalendar'
          }}
        </div>
      {{else}}
        <button class="btn btn-sm btn-primary" {{action "newCalendar"}}>New</button>
      {{/if}}

Problem is that the input field only gets autofocused the first time I click the button, and on subsequent clicks, the input gets displayed, but not autofocused. How can i fix this?