bug(tagsInput): Add input field id and tabindex

src/tags-input.js

@@ -18,6 +18,9 @@
  * @param {string=} [type=text] Type of the input element. Only 'text', 'email' and 'url' are supported values.
  * @param {string=} [text=NA] Assignable Angular expression for data-binding to the element's text.
  * @param {number=} tabindex Tab order of the control.
+ * @param {string} [inputFieldId=NA] Specific ID of the input control (useful when setting focus across multiple inputs 
+ *    in a form).
+ * @param {number} [inputFieldTabindex=NA] Tab order of the input control; if sepcified overwrite tabindex.
  * @param {string=} [placeholder=Add a tag] Placeholder text for the control.
  * @param {number=} [minLength=3] Minimum length for a new tag.
  * @param {number=} [maxLength=MAX_SAFE_INTEGER] Maximum length allowed for a new tag.
@@ -178,6 +181,8 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags
             onTagRemoving: '&',
             onTagRemoved: '&',
             onTagClicked: '&',
+            inputFieldId: '@',
+            inputFieldTabindex: '@'
         },
         replace: false,
         transclude: true,
@@ -266,6 +271,11 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags
                 setElementValidity,
                 focusInput;
 
+            // Overwrite tabindex option if input-field-tabindex were passed in
+            if (angular.isDefined(scope.inputFieldTabindex)) {
+                scope.options.tabindex = parseInt(scope.inputFieldTabindex, 10); 
+            }
+
             setElementValidity = function() {
                 ngModelCtrl.$setValidity('maxTags', tagList.items.length <= options.maxTags);
                 ngModelCtrl.$setValidity('minTags', tagList.items.length >= options.minTags);
@@ -290,7 +300,8 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags
                         return scope.text || '';
                     }
                 },
-                invalid: null
+                invalid: null,
+                inputFieldId: scope.inputFieldId || ''
             };
 
             scope.track = function(tag) {

templates/tags-input.html

@@ -8,7 +8,8 @@
         <ti-tag-item scope="templateScope" data="::tag"></ti-tag-item>
       </li>
     </ul>
-    <input class="input"
+    <input id="{{newTag.inputFieldId}}"
+           class="input"
            autocomplete="off"
            ng-model="newTag.text"
            ng-model-options="{getterSetter: true}"

test/tags-input.spec.js

@@ -59,8 +59,11 @@ describe('tags-input directive', function() {
         return getTag(index).find('ti-tag-item > ng-include > a').first();
     }
 
-    function getInput() {
-        return element.find('input');
+    function getInput(what) {
+    	if (!what) {
+        	what = 'input';
+    	}
+        return element.find(what);
     }
 
     function newTag(tag, key) {
@@ -482,6 +485,34 @@ describe('tags-input directive', function() {
         });
     });
 
+    describe('input-field-tabindex option', function() {
+        it('sets the custom input field tab index', function() {
+            // Arrange/Act
+            compile('input-field-tabindex="99"');
+
+            // Assert: expect input tabidex to be 99
+            expect(getInput().attr('tabindex')).toBe('99');
+        });
+
+        it('initializes the option to null', function() {
+            // Arrange/Act
+            compile();
+
+            // Assert
+            expect(isolateScope.options.tabindex).toBeNull();
+        });
+    });
+
+    describe('input-field-id option', function() {
+        it('sets the custom input field id', function() {
+            // Arrange/Act
+            compile('input-field-id="custominput"');
+
+            // Assert: find input by id
+            expect(getInput('custominput')).toBeDefined();
+        });
+    });
+
     describe('add-on-enter option', function() {
         it('adds a new tag when the enter key is pressed and the option is true', function() {
             // Arrange