Merge pull request #181 from corystevens/feat-tabindex-on-focusser

Add support for tabindex on focusser input

Author: dimirc

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("<input ng-disabled='$select.disabled' class='ui-select-focusser ui-select-offscreen' type='text' aria-haspopup='true' role='button' />");
+
+        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;
 

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();