feat: Include padding when resizing multiple input

src/uiSelectController.js

@@ -432,7 +432,7 @@ uis.controller('uiSelectCtrl',
         }
         _resetSearchInput();
         $scope.$broadcast('uis:select', item);
-        
+
         if (ctrl.closeOnSelect) {
           ctrl.close(skipFocusser);
         }
@@ -528,14 +528,15 @@ uis.controller('uiSelectCtrl',
     var input = ctrl.searchInput[0],
         container = ctrl.searchInput.parent().parent()[0],
         calculateContainerWidth = function() {
+          var innerWidth =_getInnerWidth(container);
           // Return the container width only if the search input is visible
-          return container.clientWidth * !!input.offsetParent;
+          return innerWidth * !!input.offsetParent;
         },
         updateIfVisible = function(containerWidth) {
           if (containerWidth === 0) {
             return false;
           }
-          var inputWidth = containerWidth - input.offsetLeft - 10;
+          var inputWidth = containerWidth - input.offsetLeft;
           if (inputWidth < 50) inputWidth = containerWidth;
           ctrl.searchInput.css('width', inputWidth+'px');
           return true;
@@ -560,6 +561,17 @@ uis.controller('uiSelectCtrl',
     });
   };
 
+  function _getInnerWidth(element) {
+    if ( typeof window.getComputedStyle === 'undefined' ) {
+      return element.clientWidth - 10;
+    }
+    var computedStyle = window.getComputedStyle(element);
+    var clientWidth = element.clientWidth;
+    var paddingLeft = parseFloat(computedStyle.paddingLeft, 10);
+    var innerWidth = clientWidth - paddingLeft;
+    return innerWidth;
+  }
+
   function _handleDropDownSelection(key) {
     var processed = true;
     switch (key) {

test/select.spec.js

@@ -1964,6 +1964,23 @@ describe('ui-select tests', function() {
 
     });
 
+    it('should update size of search input relative to the padding of the container', function() {
+
+        var el = createUiSelectMultiple();
+
+        el.appendTo('body'); // Have to append to DOM to getComputedStyle
+
+        el.css('padding-left', '500px');
+        var searchInput = el.find('.ui-select-search');
+
+        triggerKeydown(searchInput, Key.Down);
+        $timeout.flush();
+        expect(searchInput.css('width')).toBe('292px');
+
+        el.remove(); // Remove from DOM
+
+    });
+
     it('should move to last match when pressing BACKSPACE key from search', function() {
 
         var el = createUiSelectMultiple();
@@ -3107,7 +3124,7 @@ describe('ui-select tests', function() {
 
   describe('Test Spinner for promises',function(){
     var deferred;
-    
+
     function getFromServer(){
         deferred = $q.defer();
         return deferred.promise;
@@ -3130,14 +3147,14 @@ describe('ui-select tests', function() {
     it('should have set a custom class value of randomclass', function () {
       var control = createUiSelect({spinnerClass: 'randomclass'});
       expect(control.scope().$select.spinnerClass).toEqual('randomclass');
-    });   
+    });
 
     it('should not display spinner when disabled', function() {
       scope.getFromServer = getFromServer;
       var el = createUiSelect({theme: 'bootstrap', refresh:"getFromServer($select.search)", refreshDelay:0});
       openDropdown(el);
       var spinner = el.find('.ui-select-refreshing');
-      expect(spinner.hasClass('ng-hide')).toBe(true);       
+      expect(spinner.hasClass('ng-hide')).toBe(true);
       setSearchText(el, 'a');
       expect(spinner.hasClass('ng-hide')).toBe(true);
       deferred.resolve();
@@ -3150,7 +3167,7 @@ describe('ui-select tests', function() {
       var el = createUiSelect({spinnerEnabled: true,theme: 'bootstrap', refresh:"getFromServer($select.search)", refreshDelay:0});
       openDropdown(el);
       var spinner = el.find('.ui-select-refreshing');
-      expect(spinner.hasClass('ng-hide')).toBe(true);       
+      expect(spinner.hasClass('ng-hide')).toBe(true);
       setSearchText(el, 'a');
       expect(spinner.hasClass('ng-hide')).toBe(false);
       deferred.resolve();