Fix tab navigation in the form to add a new card

1 files changed, 51 insertions, 22 deletions

diff --git a/client/components/lists/body.js b/client/components/lists/body.js
index 31e43160..1cbcf8f2 100644
--- a/client/components/lists/body.js
+++ b/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,
-      'keydown form textarea': function(evt) {
-        // Pressing Enter should submit the card
-        if (evt.keyCode === 13) {
-          evt.preventDefault();
-          $(evt.currentTarget).parents('form:first').submit();
+      submit: this.addCard
+    }];
+  }
+}).register('listBody');
 
-        // 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);
+BlazeComponent.extendComponent({
+  template: function() {
+    return 'addCardForm';
+  },
 
-          // XXX Get the real position
-          var position = 'bottom';
-          nextListComponent.openForm({position: position});
-        }
+  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('listBody');
+}).register('addCardForm');