Merge pull request #712 from cmlenz/fix-input-sizing

Fix issue with the sizing of the text input field

Author: Brian Feister

src/uiSelectController.js

@@ -366,29 +366,35 @@ uis.controller('uiSelectCtrl',
     return ctrl.placeholder;
   };
 
-  var containerSizeWatch;
-  ctrl.sizeSearchInput = function(){
+  var sizeWatch = null;
+  ctrl.sizeSearchInput = function() {
     var input = _searchInput[0],
-        container = _searchInput.parent().parent()[0];
-    _searchInput.css('width','10px');
-    var calculate = function(){
-      var newWidth = container.clientWidth - input.offsetLeft - 10;
-      if(newWidth < 50) newWidth = container.clientWidth;
-      _searchInput.css('width',newWidth+'px');
-    };
-    $timeout(function(){ //Give tags time to render correctly
-      if (container.clientWidth === 0 && !containerSizeWatch){
-        containerSizeWatch = $scope.$watch(function(){ return container.clientWidth;}, function(newValue){
-          if (newValue !== 0){
-            calculate();
-            containerSizeWatch();
-            containerSizeWatch = null;
+        container = _searchInput.parent().parent()[0],
+        calculateContainerWidth = function() {
+          // Return the container width only if the search input is visible
+          return container.clientWidth * !!input.offsetParent;
+        },
+        updateIfVisible = function(containerWidth) {
+          if (containerWidth === 0) {
+            return false;
+          }
+          var inputWidth = containerWidth - input.offsetLeft - 10;
+          if (inputWidth < 50) inputWidth = containerWidth;
+          _searchInput.css('width', inputWidth+'px');
+          return true;
+        };
+
+    _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;
           }
         });
-      }else if (!containerSizeWatch) {
-        calculate();
       }
-    }, 0, false);
+    });
   };
 
   function _handleDropDownSelection(key) {

src/uiSelectDirective.js

@@ -212,6 +212,8 @@ uis.directive('uiSelect',
       attrs.$observe('disabled', function() {
         // No need to use $eval() (thanks to ng-disabled) since we already get a boolean instead of a string
         $select.disabled = attrs.disabled !== undefined ? attrs.disabled : false;
+        // As the search input field may now become visible, it may be necessary to recompute its size
+        $select.sizeSearchInput();
       });
 
       attrs.$observe('resetSearchInput', function() {