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