From 643b4eb47c55392a147e23bbe74bc89d7653d749 Mon Sep 17 00:00:00 2001
From: Pete Otaqui <pete@otaqui.com>
Date: Thu, 15 Dec 2016 13:48:47 +0000
Subject: [PATCH] feat: Include padding when resizing multiple input

Remove the hard-coded 10px when accounting for padding, and use the calculated padding size instead, in case the theme has been overridden.

Note that the test appends the generated uiSelectMultiple to the DOM (and later removes it) so that getComputedStyle functions normally.
---
 src/uiSelectController.js | 18 +++++++++++++++---
 test/select.spec.js       | 25 +++++++++++++++++++++----
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/uiSelectController.js b/src/uiSelectController.js
index 31df7b454..0ffacf059 100644
--- a/src/uiSelectController.js
+++ b/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) {
diff --git a/test/select.spec.js b/test/select.spec.js
index 47a463546..9593d4d90 100644
--- a/test/select.spec.js
+++ b/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();