.select2-container.open {
z-index: 9999; /* The z-index Select2 applies to the select2-drop */
}
+.select2-container-multi.empty .select2-search-field {
+ float: none;
+}
+
/* Handle up direction Select2 */
.ui-select-container[theme="select2"].direction-up .ui-select-match {
border-radius: 4px; /* FIXME hardcoded value :-/ */
@@ -165,6 +169,19 @@ body > .ui-select-bootstrap.open {
z-index: 1000; /* Standard Bootstrap dropdown z-index */
}
+.ui-select-multiple {
+ cursor: text;
+}
+
+.ui-select-multiple .ui-select-search {
+ width: 50px;
+ min-width: 50px;
+}
+
+.ui-select-multiple.empty .ui-select-search {
+ width: 100%;
+}
+
.ui-select-multiple.ui-select-bootstrap {
height: auto;
padding: 3px 3px 0 3px;
diff --git a/src/select2/select-multiple.tpl.html b/src/select2/select-multiple.tpl.html
index d7929c72d..33d6d5d8e 100644
--- a/src/select2/select-multiple.tpl.html
+++ b/src/select2/select-multiple.tpl.html
@@ -1,7 +1,9 @@
-
+ 'select2-container-disabled': $select.disabled,
+ 'empty': !$select.selected.length}"
+ ng-click="$select.maybeActivate($event)">
+
diff --git a/src/uiSelectController.js b/src/uiSelectController.js
index 1afccb72e..0e5e2ce83 100644
--- a/src/uiSelectController.js
+++ b/src/uiSelectController.js
@@ -101,6 +101,16 @@ uis.controller('uiSelectCtrl',
}
};
+ ctrl.maybeActivate = function(e) {
+ if (e.currentTarget === e.target) {
+ // Clicking on topmost element causes emptying choices repeater under
+ // some circumstances. Deferring is a workaround.
+ $timeout(function() {
+ ctrl.activate.apply(this, Array.prototype.slice.call(arguments, 1));
+ });
+ }
+ };
+
ctrl.findGroupByName = function(name) {
return ctrl.groups && ctrl.groups.filter(function(group) {
return group.name === name;
@@ -379,36 +389,56 @@ uis.controller('uiSelectCtrl',
};
var sizeWatch = null;
- ctrl.sizeSearchInput = function() {
-
- var input = ctrl.searchInput[0],
+ ctrl.sizeSearchInput = function() {
+ var
+ input = ctrl.searchInput[0],
container = ctrl.searchInput.parent().parent()[0],
+
+ calculateContainerPadding = function(leftOnly) {
+ var padding = 0;
+ var computedStyle;
+
+ if (window.getComputedStyle && (computedStyle = window.getComputedStyle(container))) {
+ var attrs = {'padding-left': true, 'padding-right': !leftOnly};
+ for (var attr in attrs) {
+ if (attrs.hasOwnProperty(attr) && attrs[attr]) {
+ padding += parseInt(computedStyle[attr]) || 0;
+ }
+ }
+ }
+
+ return padding;
+ },
+
calculateContainerWidth = function() {
// Return the container width only if the search input is visible
- return container.clientWidth * !!input.offsetParent;
+ if (!input.offsetParent) {
+ return 0;
+ }
+
+ return container.clientWidth - calculateContainerPadding();
},
+
updateIfVisible = function(containerWidth) {
if (containerWidth === 0) {
return false;
}
- var inputWidth = containerWidth - input.offsetLeft - 10;
- if (inputWidth < 50) inputWidth = containerWidth;
+ var inputWidth = containerWidth - input.offsetLeft + calculateContainerPadding(true);
ctrl.searchInput.css('width', inputWidth+'px');
return true;
};
- ctrl.searchInput.css('width', '10px');
- $timeout(function() { //Give tags time to render correctly
- if (sizeWatch === null && !updateIfVisible(calculateContainerWidth())) {
- sizeWatch = $scope.$watch(calculateContainerWidth, function(containerWidth) {
- if (updateIfVisible(containerWidth)) {
- sizeWatch();
- sizeWatch = null;
- }
- });
- }
- });
- };
+ $timeout(function() { //Give tags time to render correctly
+ if (sizeWatch === null && !updateIfVisible(calculateContainerWidth())) {
+ sizeWatch = $scope.$watch(calculateContainerWidth, function(containerWidth) {
+ if (updateIfVisible(containerWidth)) {
+ sizeWatch();
+ sizeWatch = null;
+ }
+ });
+ }
+ });
+ };
function _handleDropDownSelection(key) {
var processed = true;
diff --git a/src/uiSelectMatchDirective.js b/src/uiSelectMatchDirective.js
index b8102c7ad..6c6eab72f 100644
--- a/src/uiSelectMatchDirective.js
+++ b/src/uiSelectMatchDirective.js
@@ -22,11 +22,6 @@ uis.directive('uiSelectMatch', ['uiSelectConfig', function(uiSelectConfig) {
attrs.$observe('allowClear', setAllowClear);
setAllowClear(attrs.allowClear);
-
- if($select.multiple){
- $select.sizeSearchInput();
- }
-
}
};
}]);
diff --git a/src/uiSelectMultipleDirective.js b/src/uiSelectMultipleDirective.js
index 261640105..3cfe79d06 100644
--- a/src/uiSelectMultipleDirective.js
+++ b/src/uiSelectMultipleDirective.js
@@ -24,7 +24,6 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec
//e.g. When user clicks on a selection, the selected array changes and
//the dropdown should remove that item
$select.refreshItems();
- $select.sizeSearchInput();
};
// Remove item from multiple select
@@ -40,7 +39,6 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec
$select.selected.splice(index, 1);
ctrl.activeMatchIndex = -1;
- $select.sizeSearchInput();
// Give some time for scope propagation.
$timeout(function(){
@@ -164,11 +162,11 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec
scope.$on('uis:activate', function () {
$selectMultiple.activeMatchIndex = -1;
+ $select.sizeSearchInput();
});
- scope.$watch('$select.disabled', function(newValue, oldValue) {
- // As the search input field may now become visible, it may be necessary to recompute its size
- if (oldValue && !newValue) $select.sizeSearchInput();
+ scope.$on('uis:close', function() {
+ $select.searchInput.css('width', '');
});
$select.searchInput.on('keydown', function(e) {
@@ -187,6 +185,7 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec
}
});
});
+
function _getCaretPosition(el) {
if(angular.isNumber(el.selectionStart)) return el.selectionStart;
// selectionStart is not supported in IE8 and we don't want hacky workarounds so we compromise
diff --git a/test/select.spec.js b/test/select.spec.js
index d8255405b..814a225c8 100644
--- a/test/select.spec.js
+++ b/test/select.spec.js
@@ -1578,20 +1578,6 @@ describe('ui-select tests', function() {
expect($(el).attr('tabindex')).toEqual(undefined);
});
- it('should update size of search input after removing an item', function() {
- scope.selection.selectedMultiple = [scope.people[4], scope.people[5]]; //Wladimir & Samantha
- var el = createUiSelectMultiple();
-
- spyOn(el.scope().$select, 'sizeSearchInput');
-
- var searchInput = el.find('.ui-select-search');
- var oldWidth = searchInput.css('width');
-
- el.find('.ui-select-match-item').first().find('.ui-select-match-close').click();
- expect(el.scope().$select.sizeSearchInput).toHaveBeenCalled();
-
- });
-
it('should move to last match when pressing BACKSPACE key from search', function() {
var el = createUiSelectMultiple();