diff --git a/package.json b/package.json index 97179d781..af95e4628 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,9 @@ "karma": "^0.12.16", "karma-chrome-launcher": "^0.1.3", "karma-coverage": "~0.2", + "karma-edge-launcher": "^0.4.1", "karma-firefox-launcher": "~0.1", + "karma-ie-launcher": "^1.0.0", "karma-jasmine": "~0.2", "karma-ng-html2js-preprocessor": "^0.1.0", "karma-phantomjs-launcher": "~0.1.4", diff --git a/src/uiSelectController.js b/src/uiSelectController.js index 0d1c595eb..b66d5531d 100644 --- a/src/uiSelectController.js +++ b/src/uiSelectController.js @@ -528,14 +528,14 @@ uis.controller('uiSelectCtrl', container = ctrl.$element[0], calculateContainerWidth = function() { // Return the container width only if the search input is visible - return container.clientWidth * !!input.offsetParent; + return $(container).width() * !!input.offsetParent; // width must be WITHOUT padding - to calculate space for text correctly }, updateIfVisible = function(containerWidth) { if (containerWidth === 0) { return false; } var inputWidth = containerWidth - input.offsetLeft; - if (inputWidth < 50) inputWidth = containerWidth; + if (inputWidth < 50) inputWidth = containerWidth; // TODO make 50 a parameter (minInputWidth) which can be set by user ctrl.searchInput.css('width', inputWidth+'px'); return true; }; diff --git a/test/select.spec.js b/test/select.spec.js index 3922834af..8499e56d9 100644 --- a/test/select.spec.js +++ b/test/select.spec.js @@ -2009,7 +2009,44 @@ describe('ui-select tests', function () { el.find('.ui-select-match-item').first().find('.ui-select-match-close').click(); expect(el.scope().$select.sizeSearchInput).toHaveBeenCalled(); + }); + + 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).css("width", "100%"); + el.css("width", "800px !important"); + angular.element(document.body).append(el); + $timeout.flush(); // needed to make input take it's real width, not 4 or 10 px + + var searchInput = el.find('.ui-select-search'); + + // no item selected, input should fill the whole row + expect(searchInput.outerWidth()).toBe(792); + clickItem(el, 'Wladimir'); + $timeout.flush(); + // 2 items are selected, input should be less than 100% + expect(searchInput.outerWidth()).toBe(548); // remaining width of the row + + clickItem(el, 'Samantha'); + $timeout.flush(); + // input should be even smaller than before + expect(searchInput.outerWidth()).toBe(304); + + clickItem(el, 'Adrian'); + $timeout.flush(); + // min input width is 50px (unfortunately hardcoded), so we are still in the first row + expect(searchInput.outerWidth()).toBe(98); + + clickItem(el, 'Nicole'); + $timeout.flush(); + // input goes to the second row and should still fill the whole row minus the item width (whole row should be clickable) + expect(searchInput.outerWidth()).toBe(649); }); it('should update size of search input use container width', function () {