fix(uiSelectCtrl): properly calculate container width

- Account for paddings on input container in case box-sizing: border-box
is set.
- Added some tests for this case

Closes angular-ui#1980.

Author: Stefan Zollinger

src/common.js

@@ -172,4 +172,24 @@ var uis = angular.module('ui.select', [])
       left: boundingClientRect.left + ($window.pageXOffset || $document[0].documentElement.scrollLeft)
     };
   };
+}])
+
+/**
+ * Gets an elements inner width (width minus padding)
+ */
+.factory('uisElementInnerWidth',
+  ['$window',
+  function ($window) {
+    return $window.jQuery ? getInnerWidthJQuery : getInnerWidth;
+
+    function getInnerWidthJQuery(element) {
+      return element.width();
+    }
+
+    function getInnerWidth(element) {
+      var style = $window.getComputedStyle(element[0]);
+      var paddingLeft = parseFloat(style.getPropertyValue('padding-left'));
+      var paddingRight = parseFloat(style.getPropertyValue('padding-right'));
+      return element[0].clientWidth - paddingLeft - paddingRight;
+    }
 }]);

src/uiSelectController.js

@@ -5,8 +5,8 @@
  * put as much logic in the controller (instead of the link functions) as possible so it can be easily tested.
  */
 uis.controller('uiSelectCtrl',
-  ['$scope', '$element', '$timeout', '$filter', '$$uisDebounce', 'uisRepeatParser', 'uiSelectMinErr', 'uiSelectConfig', '$parse', '$injector', '$window',
-  function($scope, $element, $timeout, $filter, $$uisDebounce, RepeatParser, uiSelectMinErr, uiSelectConfig, $parse, $injector, $window) {
+  ['$scope', '$element', '$timeout', '$filter', '$$uisDebounce', 'uisRepeatParser', 'uiSelectMinErr', 'uiSelectConfig', '$parse', '$injector', '$window', 'uisElementInnerWidth',
+  function($scope, $element, $timeout, $filter, $$uisDebounce, RepeatParser, uiSelectMinErr, uiSelectConfig, $parse, $injector, $window, uisElementInnerWidth) {
 
   var ctrl = this;
 
@@ -534,10 +534,9 @@ uis.controller('uiSelectCtrl',
   ctrl.sizeSearchInput = function() {
 
     var input = ctrl.searchInput[0],
-        container = ctrl.$element[0],
         calculateContainerWidth = function() {
           // Return the container width only if the search input is visible
-          return container.clientWidth * !!input.offsetParent;
+          return uisElementInnerWidth(ctrl.$element) * !!input.offsetParent;
         },
         updateIfVisible = function(containerWidth) {
           if (containerWidth === 0) {

test/select.spec.js

@@ -2060,6 +2060,52 @@ describe('ui-select tests', function () {
 
     });
 
+    it('input should take the whole remaining part of the current row, or, if smaller than the min input width, go to the next row', function () {
+      //scope.selection.selectedMultiple = [scope.people[4], scope.people[5]]; //Wladimir & Samantha
+      var el = createUiSelectMultiple({
+        tagging: '',
+        taggingLabel: 'false'
+      });
+
+      angular.element(document.body).append(el);
+      // Set fixed match item width for easier testing
+      var style = $('<style> * { box-sizing: border-box; } .ui-select-container { position: relative; } .ui-select-search { border: 0; } .ui-select-match-item { display: inline-block; overflow: hidden; width: 260px; white-space: nowrap; } </style>');
+      $('head').append(style);
+
+      var searchInput = el.find('.ui-select-search');
+
+      el.css({
+        paddingLeft: '6px',
+        paddingRight: '6px'
+      });
+
+      $timeout.flush();
+
+      var fullWidth = searchInput.outerWidth();
+      var matchItemWidth = 260;
+      var textNodeWidth = 4;
+
+      expect(searchInput.outerWidth()).toBe(el.width() - 6); // Full width minus padding
+
+      clickItem(el, 'Wladimir');
+      $timeout.flush();
+      // 1 items selected, input should be less than full width minus the invisible text node and one item with
+      expect(searchInput.outerWidth()).toBe(fullWidth - textNodeWidth - matchItemWidth ); // remaining width of the row
+
+      clickItem(el, 'Samantha');
+      $timeout.flush();
+      // Input should be even smaller than before
+      expect(searchInput.outerWidth()).toBe(fullWidth - textNodeWidth - (2 * matchItemWidth));
+
+      clickItem(el, 'Adrian');
+      $timeout.flush();
+      // Minimum input width is 50px, we should be on a new line now
+      expect(searchInput.outerWidth()).toBe(fullWidth);
+
+      el.remove();
+      style.remove();
+    });
+
     it('should update size of search input use container width', function () {
       scope.selection.selectedMultiple = [scope.people[4], scope.people[5]]; //Wladimir & Samantha
       var el = createUiSelectMultiple({