输入仅在第一次自动聚焦

Question

我仍在学习Ember，并且在显示/隐藏模板中的某些元素时遇到了保持一致行为的问题。我有以下控制器

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();
    },
  }

});

和模板

{{#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}}

问题是输入字段仅在我第一次单击按钮时才会自动聚焦，在后续点击时，输入会显示，但不会自动聚焦。我该如何解决这个问题？