diff --git a/src/select.js b/src/select.js index 2e780504a..8aa5e88c8 100644 --- a/src/select.js +++ b/src/select.js @@ -549,6 +549,8 @@ var $select = ctrls[0]; var ngModel = ctrls[1]; + var searchInput = element.querySelectorAll('input.ui-select-search'); + $select.multiple = angular.isDefined(attrs.multiple); $select.onSelectCallback = $parse(attrs.onSelect); @@ -624,6 +626,21 @@ //Idea from: https://github.com/ivaynberg/select2/blob/79b5bf6db918d7560bdd959109b7bcfb47edaf43/select2.js#L1954 var focusser = angular.element(""); + + if(attrs.tabindex){ + //tabindex might be an expression, wait until it contains the actual value before we set the focusser tabindex + attrs.$observe('tabindex', function(value) { + //If we are using multiple, add tabindex to the search input + if($select.multiple){ + searchInput.attr("tabindex", value); + } else { + focusser.attr("tabindex", value); + } + //Remove the tabindex on the parent so that it is not focusable + element.removeAttr("tabindex"); + }); + } + $compile(focusser)(scope); $select.focusser = focusser; diff --git a/test/select.spec.js b/test/select.spec.js index 5e331fb3e..7816fa452 100644 --- a/test/select.spec.js +++ b/test/select.spec.js @@ -66,6 +66,7 @@ describe('ui-select tests', function() { if (attrs.disabled !== undefined) { attrsHtml += ' ng-disabled="' + attrs.disabled + '"'; } if (attrs.required !== undefined) { attrsHtml += ' ng-required="' + attrs.required + '"'; } if (attrs.theme !== undefined) { attrsHtml += ' theme="' + attrs.theme + '"'; } + if (attrs.tabindex !== undefined) { attrsHtml += ' tabindex="' + attrs.tabindex + '"'; } } return compileTemplate( @@ -204,7 +205,28 @@ describe('ui-select tests', function() { el.find(".ui-select-toggle").click(); expect($select.open).toEqual(false); + }); + + it('should pass tabindex to focusser', function() { + var el = createUiSelect({tabindex: 5}); + + expect($(el).find('.ui-select-focusser').attr('tabindex')).toEqual('5'); + expect($(el).attr('tabindex')).toEqual(undefined); + }); + + it('should pass tabindex to focusser when tabindex is an expression', function() { + scope.tabValue = 22; + var el = createUiSelect({tabindex: '{{tabValue + 10}}'}); + expect($(el).find('.ui-select-focusser').attr('tabindex')).toEqual('32'); + expect($(el).attr('tabindex')).toEqual(undefined); + }); + + it('should not give focusser a tabindex when ui-select does not have one', function() { + var el = createUiSelect(); + + expect($(el).find('.ui-select-focusser').attr('tabindex')).toEqual(undefined); + expect($(el).attr('tabindex')).toEqual(undefined); }); it('should be disabled if the attribute says so', function() { @@ -751,6 +773,7 @@ describe('ui-select tests', function() { if (attrs !== undefined) { if (attrs.disabled !== undefined) { attrsHtml += ' ng-disabled="' + attrs.disabled + '"'; } if (attrs.required !== undefined) { attrsHtml += ' ng-required="' + attrs.required + '"'; } + if (attrs.tabindex !== undefined) { attrsHtml += ' tabindex="' + attrs.tabindex + '"'; } } return compileTemplate( @@ -796,6 +819,31 @@ describe('ui-select tests', function() { // $timeout.flush(); }); + it('should pass tabindex to searchInput', function() { + var el = createUiSelectMultiple({tabindex: 5}); + var searchInput = el.find('.ui-select-search'); + + expect(searchInput.attr('tabindex')).toEqual('5'); + expect($(el).attr('tabindex')).toEqual(undefined); + }); + + it('should pass tabindex to searchInput when tabindex is an expression', function() { + scope.tabValue = 22; + var el = createUiSelectMultiple({tabindex: '{{tabValue + 10}}'}); + var searchInput = el.find('.ui-select-search'); + + expect(searchInput.attr('tabindex')).toEqual('32'); + expect($(el).attr('tabindex')).toEqual(undefined); + }); + + it('should not give searchInput a tabindex when ui-select does not have one', function() { + var el = createUiSelectMultiple(); + var searchInput = el.find('.ui-select-search'); + + expect(searchInput.attr('tabindex')).toEqual(undefined); + expect($(el).attr('tabindex')).toEqual(undefined); + }); + it('should update size of search input after removing an item', function() { scope.selection.selectedMultiple = [scope.people[4], scope.people[5]]; //Wladimir & Samantha var el = createUiSelectMultiple();