From 2fbd2858b252c869e9ea38be63af37ebbdb316b8 Mon Sep 17 00:00:00 2001 From: DmitryGonchar Date: Sat, 17 Jun 2017 18:29:43 +0300 Subject: [PATCH 1/4] fix(uiSelectCtrl): fix input width calculations input is not too big or too small - it takes the whole remaining part of the current row. If smaller than the min input width - goes to the next row closes #1980, possibly #2010 --- src/uiSelectController.js | 4 ++-- test/select.spec.js | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 38 insertions(+), 2 deletions(-) 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..ea554cbe0 100644 --- a/test/select.spec.js +++ b/test/select.spec.js @@ -2009,7 +2009,43 @@ 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%"); + 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 () { From d9c6ad4322386111f6d4864d48b9e56e05168aac Mon Sep 17 00:00:00 2001 From: DmitryGonchar Date: Sat, 17 Jun 2017 18:39:59 +0300 Subject: [PATCH 2/4] attempt to fix Firefox tests --- test/select.spec.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/test/select.spec.js b/test/select.spec.js index ea554cbe0..af9652d5e 100644 --- a/test/select.spec.js +++ b/test/select.spec.js @@ -2018,7 +2018,8 @@ describe('ui-select tests', function () { taggingLabel: 'false' }); - //angular.element(document.body).css("width", "100%"); + 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 @@ -2030,6 +2031,7 @@ describe('ui-select tests', function () { clickItem(el, 'Wladimir'); $timeout.flush(); // 2 items are selected, input should be less than 100% + console.log('test', searchInput.outerWidth(), searchInput.width()); // TODO delete expect(searchInput.outerWidth()).toBe(548); // remaining width of the row clickItem(el, 'Samantha'); From 33130b964b58d18ec112071ea74988cb265b2d11 Mon Sep 17 00:00:00 2001 From: DmitryGonchar Date: Tue, 27 Jun 2017 13:42:25 +0300 Subject: [PATCH 3/4] chore(karma): allow to run karma tests in IE and Edge Add missing plugins for IE and Edge --- package.json | 2 ++ 1 file changed, 2 insertions(+) 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", From 27283b433523156af2bfa7fe37970a1adfb88d7e Mon Sep 17 00:00:00 2001 From: DmitryGonchar Date: Tue, 27 Jun 2017 14:12:42 +0300 Subject: [PATCH 4/4] style(test): remove temporary console.log() --- test/select.spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/test/select.spec.js b/test/select.spec.js index af9652d5e..8499e56d9 100644 --- a/test/select.spec.js +++ b/test/select.spec.js @@ -2031,7 +2031,6 @@ describe('ui-select tests', function () { clickItem(el, 'Wladimir'); $timeout.flush(); // 2 items are selected, input should be less than 100% - console.log('test', searchInput.outerWidth(), searchInput.width()); // TODO delete expect(searchInput.outerWidth()).toBe(548); // remaining width of the row clickItem(el, 'Samantha');