Variable element width support in multiple mode

examples/demo-multi-select.html

@@ -122,7 +122,7 @@ <h3>Array of strings</h3>
   <p>Selected: {{multipleDemo.colors}}</p>
   <hr>
   <h3>Array of objects (sorting enabled)</h3>
-  <ui-select multiple ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled" sortable="true" close-on-select="false" style="width: 800px;">
+  <ui-select multiple ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled" sortable="true" close-on-select="false">
     <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
     <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
@@ -135,8 +135,8 @@ <h3>Array of objects (sorting enabled)</h3>
   <p>Selected: {{multipleDemo.selectedPeople}}</p>
 
   <hr>
-  <h3>Deselect callback with single property binding</h3>
-  <ui-select multiple ng-model="multipleDemo.deSelectedPeople" on-remove="removed($item, $model)" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 800px;" title="Choose a person">
+  <h3>Deselect callback with single property binding (select2 theme)</h3>
+  <ui-select multiple ng-model="multipleDemo.deSelectedPeople" on-remove="removed($item, $model)" theme="select2" ng-disabled="disabled" close-on-select="false" title="Choose a person" style="min-width: 300px">
     <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
     <ui-select-choices repeat="person.email as person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
@@ -150,8 +150,8 @@ <h3>Deselect callback with single property binding</h3>
   <p>Last removed model: {{lastRemoved.model}}</p>
 
   <hr>
-  <h3>Array of objects with single property binding</h3>
-  <ui-select multiple ng-model="multipleDemo.selectedPeopleSimple" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 800px;" title="Choose a person">
+  <h3>Array of objects with single property binding (select2 theme)</h3>
+  <ui-select multiple ng-model="multipleDemo.selectedPeopleSimple" theme="select2" ng-disabled="disabled" close-on-select="false" title="Choose a person">
     <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
     <ui-select-choices repeat="person.email as person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
@@ -165,7 +165,7 @@ <h3>Array of objects with single property binding</h3>
 
   <hr>
   <h3>Array of objects (with groupBy)</h3>
-  <ui-select multiple ng-model="multipleDemo.selectedPeopleWithGroupBy" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 800px;" title="Choose a person">
+  <ui-select multiple ng-model="multipleDemo.selectedPeopleWithGroupBy" theme="bootstrap" ng-disabled="disabled" close-on-select="false" title="Choose a person">
     <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
     <ui-select-choices group-by="someGroupFn" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>

src/bootstrap/select-multiple.tpl.html

@@ -1,5 +1,7 @@
-<div class="ui-select-container ui-select-multiple ui-select-bootstrap dropdown form-control" ng-class="{open: $select.open}">
-  <div>
+<div class="ui-select-container ui-select-multiple ui-select-bootstrap dropdown form-control"
+     ng-class="{open: $select.open, empty: !$select.selected.length}"
+     ng-click="$select.maybeActivate($event)">
+  <div ng-click="$select.maybeActivate($event)">
     <div class="ui-select-match"></div>
     <input type="text"
            autocomplete="false" 

src/common.css

@@ -13,8 +13,8 @@
   overflow: hidden !important;
   position: absolute !important;
   outline: 0 !important;
-  left: 0px !important;
-  top: 0px !important;
+  left: 0 !important;
+  top: 0 !important;
 }
 
 
@@ -45,6 +45,10 @@ body > .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;

src/select2/select-multiple.tpl.html

@@ -1,7 +1,9 @@
 <div class="ui-select-container ui-select-multiple select2 select2-container select2-container-multi"
      ng-class="{'select2-container-active select2-dropdown-open open': $select.open,
-                'select2-container-disabled': $select.disabled}">
-  <ul class="select2-choices">
+                'select2-container-disabled': $select.disabled,
+                'empty': !$select.selected.length}"
+     ng-click="$select.maybeActivate($event)">
+  <ul class="select2-choices" ng-click="$select.maybeActivate($event)">
     <span class="ui-select-match"></span>
     <li class="select2-search-field">
       <input
@@ -21,7 +23,6 @@
         ng-hide="$select.disabled"
         ng-model="$select.search"
         ng-click="$select.activate()"
-        style="width: 34px;"
         ondrop="return false;">
     </li>
   </ul>

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;

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

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

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