Fix tab navigation in the form to add a new card

client/components/lists/body.jade

@@ -2,7 +2,7 @@ template(name="listBody")
   .minicards.clearfix.js-minicards
     if cards.count
       +inlinedForm(autoclose=false position="top")
-        +addCardForm
+        +addCardForm(listId=_id position="top")
     each cards
       .minicard.card.js-minicard.js-member-droppable(
         class="{{#if isSelected}}is-selected{{/if}}")
@@ -32,7 +32,7 @@ template(name="listBody")
                 span.badge-text= attachments.count
     if currentUser.isBoardMember
       +inlinedForm(autoclose=false position="bottom")
-        +addCardForm
+        +addCardForm(listId=_id position="bottom")
       else
         a.open-card-composer.js-open-inlined-form
           i.fa.fa-plus

client/components/lists/body.js

@@ -7,11 +7,25 @@ BlazeComponent.extendComponent({
     return Session.equals('currentCard', this.currentData()._id);
   },
 
+  openForm: function(options) {
+    options = options || {};
+    options.position = options.position || 'top';
+
+    var forms = this.componentChildren('inlinedForm');
+    var form = _.find(forms, function(component) {
+      return component.data().position === options.position;
+    });
+    if (! form && forms.length > 0) {
+      form = forms[0];
+    }
+    form.open();
+  },
+
   addCard: function(evt) {
     evt.preventDefault();
     var textarea = $(evt.currentTarget).find('textarea');
     var title = textarea.val();
-    var position = this.currentData().position;
+    var position = Blaze.getData(evt.currentTarget).position;
     var sortIndex;
     if (position === 'top') {
       sortIndex = Utils.getSortIndex(null, this.find('.js-minicard:first'));
@@ -46,29 +60,44 @@ BlazeComponent.extendComponent({
 
   events: function() {
     return [{
-      submit: this.addCard,
+      submit: this.addCard
-      'keydown form textarea': function(evt) {
-        // Pressing Enter should submit the card
-        if (evt.keyCode === 13) {
-          evt.preventDefault();
-          $(evt.currentTarget).parents('form:first').submit();
-
-        // Pressing Tab should open the form of the next column, and Maj+Tab go
-        // in the reverse order
-        } else if (evt.keyCode === 9) {
-          evt.preventDefault();
-          var isReverse = evt.shiftKey;
-          var list = $('#js-list-' + this.data()._id);
-          var nextList = list[isReverse ? 'prev' : 'next']('.js-list').get(0) ||
-            $('.js-list:' + (isReverse ? 'last' : 'first')).get(0);
-          var nextListComponent =
-                                BlazeComponent.getComponentForElement(nextList);
-
-          // XXX Get the real position
-          var position = 'bottom';
-          nextListComponent.openForm({position: position});
-        }
-      }
     }];
   }
 }).register('listBody');
+
+BlazeComponent.extendComponent({
+  template: function() {
+    return 'addCardForm';
+  },
+
+  pressKey: function(evt) {
+    // Pressing Enter should submit the card
+    if (evt.keyCode === 13) {
+      evt.preventDefault();
+      $(evt.currentTarget).parents('form:first').submit();
+
+    // Pressing Tab should open the form of the next column, and Maj+Tab go
+    // in the reverse order
+    } else if (evt.keyCode === 9) {
+      evt.preventDefault();
+      var isReverse = evt.shiftKey;
+      var list = $('#js-list-' + this.data().listId);
+      var listSelector = '.js-list:not(.js-add-list)';
+      var nextList = list[isReverse ? 'prev' : 'next'](listSelector).get(0);
+      // If there isn't no next list, loop back to the beginning.
+      if (! nextList) {
+        nextList = $(listSelector + (isReverse ? ':last' : ':first')).get(0);
+      }
+
+      BlazeComponent.getComponentForElement(nextList).openForm({
+        position:this.data().position
+      });
+    }
+  },
+
+  events: function() {
+    return [{
+      keydown: this.pressKey
+    }];
+  }
+}).register('addCardForm');

client/components/lists/main.js

@@ -3,18 +3,9 @@ BlazeComponent.extendComponent({
     return 'list';
   },
 
+  // Proxy
   openForm: function(options) {
-    options = options || {};
+    this.componentChildren('listBody')[0].openForm(options);
-    options.position = options.position || 'top';
-
-    var listComponent = this.componentChildren('listBody')[0];
-    var forms = listComponent.componentChildren('inlinedForm');
-
-    if (options.position === 'top') {
-      forms[0].open();
-    } else {
-      forms[forms.length - 1].open();
-    }
   },
 
   // XXX The jQuery UI sortable plugin is far from ideal here. First we include

client/components/lists/menu.js

@@ -1,10 +1,8 @@
 Template.listActionPopup.events({
   'click .js-add-card': function() {
-    // XXX We need a better API and architecture here. See
-    // https://github.com/peerlibrary/meteor-blaze-components/issues/19
     var listDom = document.getElementById('js-list-' + this._id);
-    var listInstance = Blaze.getView(listDom).templateInstance();
+    var listComponent = BlazeComponent.getComponentForElement(listDom);
-    listInstance.get('component').openForm();
+    listComponent.openForm({ position: 'top' });
     Popup.close();
   },
   'click .js-list-subscribe': function() {},