fix(autocomplete): fixes menu flicker

Animation transitions are temporarily unavailable, pending a fix to ngAnimate that will re-enable them.
angular · Apr 13, 2015 · 9b2dc2c · ThomasBurleson · Apr 14, 2015 · 9b2dc2c
1 parent 07e8201
commit 9b2dc2c
Showing 1 changed file with 7 additions and 9 deletions.
diff --git a/src/components/autocomplete/js/autocompleteController.js b/src/components/autocomplete/js/autocompleteController.js
@@ -6,9 +6,9 @@
 
   var ITEM_HEIGHT = 41,
       MAX_HEIGHT = 5.5 * ITEM_HEIGHT,
-      MENU_PADDING = 16;
+      MENU_PADDING = 8;
 
-  function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $timeout, $mdTheming, $window) {
+  function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $timeout, $mdTheming, $window, $rootElement) {
 
     //-- private variables
 
@@ -40,7 +40,6 @@
     self.focus    = focus;
     self.clear    = clearValue;
     self.select   = select;
-    self.fetch    = $mdUtil.debounce(fetchResults);
     self.getCurrentDisplayValue         = getCurrentDisplayValue;
     self.registerSelectedItemWatcher    = registerSelectedItemWatcher;
     self.unregisterSelectedItemWatcher  = unregisterSelectedItemWatcher;
@@ -68,14 +67,13 @@
           vrect  = elements.snap.getBoundingClientRect(),
           root   = elements.root.getBoundingClientRect(),
           top    = vrect.bottom - root.top,
-          bot    = root.height - vrect.top,
+          bot    = root.bottom - vrect.top,
           left   = hrect.left - root.left,
           width  = hrect.width,
           styles = {
             left:     left + 'px',
             minWidth: width + 'px',
-            maxWidth: Math.max(hrect.right - root.left, root.right - hrect.left) - MENU_PADDING + 'px',
-            opacity:  0
+            maxWidth: Math.max(hrect.right - root.left, root.right - hrect.left) - MENU_PADDING + 'px'
           };
       if (top > bot && root.height - hrect.bottom - MENU_PADDING < MAX_HEIGHT) {
         styles.top = 'auto';
@@ -84,14 +82,14 @@
       } else {
         styles.top = top + 'px';
         styles.bottom = 'auto';
-        styles.maxHeight = Math.min(MAX_HEIGHT, root.height - hrect.bottom - MENU_PADDING) + 'px';
+        styles.maxHeight = Math.min(MAX_HEIGHT, root.bottom - hrect.bottom - MENU_PADDING) + 'px';
       }
-      $timeout(correctHorizontalAlignment, 0, false);
       elements.$.ul.css(styles);
+      $timeout(correctHorizontalAlignment, 0, false);
 
       function correctHorizontalAlignment () {
         var dropdown = elements.ul.getBoundingClientRect(),
-            styles   = { opacity: 1 };
+            styles   = {};
         if (dropdown.right > root.right - MENU_PADDING) {
           styles.left = (hrect.right - dropdown.width) + 'px';
         }