diff --git a/src/tags-input.js b/src/tags-input.js index de8e2466..035b7c87 100644 --- a/src/tags-input.js +++ b/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) { diff --git a/templates/tags-input.html b/templates/tags-input.html index 81e260ff..93a7e790 100644 --- a/templates/tags-input.html +++ b/templates/tags-input.html @@ -8,7 +8,8 @@ - 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