Merge pull request #291 from angular-ui/fix-multiselect-width

fix(multiselect): input width should recalculate correctly when available

Author: dimirc

src/select.js

@@ -388,14 +388,28 @@
       return ctrl.placeholder;
     };
 
+    var containerSizeWatch; 
     ctrl.sizeSearchInput = function(){
       var input = _searchInput[0],
           container = _searchInput.parent().parent()[0];
       _searchInput.css('width','10px');
-      $timeout(function(){
+      var calculate = function(){
         var newWidth = container.clientWidth - input.offsetLeft - 10;
         if(newWidth < 50) newWidth = container.clientWidth;
         _searchInput.css('width',newWidth+'px');
+      };
+      $timeout(function(){ //Give tags time to render correctly
+        if (container.clientWidth === 0 && !containerSizeWatch){
+          containerSizeWatch = $scope.$watch(function(){ return container.clientWidth;}, function(newValue){
+            if (newValue !== 0){
+              calculate();
+              containerSizeWatch();
+              containerSizeWatch = null;
+            }
+          });
+        }else if (!containerSizeWatch) {
+          calculate();
+        }
       }, 0, false);
     };
 
@@ -919,7 +933,7 @@
         });
 
         if($select.multiple){
-          $select.sizeSearchInput();
+            $select.sizeSearchInput();
         }
 
       }

test/select.spec.js

@@ -1083,12 +1083,14 @@ describe('ui-select tests', function() {
     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();
+
+        spyOn(el.scope().$select, 'sizeSearchInput');
+
         var searchInput = el.find('.ui-select-search');
         var oldWidth = searchInput.css('width');
-        el.find('.ui-select-match-item').first().find('.ui-select-match-close').click();
 
-        $timeout.flush();
-        expect(oldWidth).not.toBe(searchInput.css('width'));
+        el.find('.ui-select-match-item').first().find('.ui-select-match-close').click();
+        expect(el.scope().$select.sizeSearchInput).toHaveBeenCalled();
 
     });