fix(autocomplete): dropdown will shift if there is not enough space

Closes #2004
angular · Apr 7, 2015 · 0b15c97 · 0b15c97
1 parent c11aed0
commit 0b15c97
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 27 deletions.
diff --git a/src/components/autocomplete/demoFloatingLabel/index.html b/src/components/autocomplete/demoFloatingLabel/index.html
@@ -1,5 +1,5 @@
 <div ng-app="autocompleteFloatingLabelDemo" ng-controller="DemoCtrl as ctrl" layout="column">
-  <md-content class="md-padding" layout="column" style="min-height: 367px">
+  <md-content class="md-padding" layout="column">
     <form ng-submit="$event.preventDefault()">
       <p>The following example demonstrates floating labels being used as a normal form element.</p>
       <div layout-gt-sm="row">
@@ -8,7 +8,6 @@
           <input type="text"/>
         </md-input-container>
         <md-autocomplete flex
-            ng-disabled="ctrl.isDisabled"
             md-no-cache="ctrl.noCache"
             md-selected-item="ctrl.selectedItem"
             md-search-text="ctrl.searchText"
@@ -18,8 +17,6 @@
           <span md-highlight-text="ctrl.searchText">{{item.display}}</span>
         </md-autocomplete>
       </div>
-      <md-checkbox ng-model="ctrl.isDisabled">Disable the input?</md-checkbox>
     </form>
   </md-content>
-
 </div>
diff --git a/src/components/autocomplete/js/autocompleteController.js b/src/components/autocomplete/js/autocompleteController.js
@@ -4,7 +4,11 @@
       .module('material.components.autocomplete')
       .controller('MdAutocompleteCtrl', MdAutocompleteCtrl);
 
-  function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $timeout, $rootElement, $mdTheming) {
+  var ITEM_HEIGHT = 41,
+      MAX_HEIGHT = 5.5 * ITEM_HEIGHT,
+      MENU_PADDING = 16;
+
+  function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $timeout, $rootElement, $mdTheming, $window) {
 
     //-- private variables
 
@@ -58,21 +62,24 @@
       });
     }
 
-    function getNearestContentElement () {
-      var current = $element.parent()[0];
-      while (current && current !== $rootElement[0] && current !== document.body) {
-        if (current.tagName && current.tagName.toLowerCase() === 'md-content') break;
-        current = current.parentNode;
-      }
-      return current;
-    }
-
     function positionDropdown () {
-      elements.$.ul.css({
-        left:  $element.prop('offsetLeft') + 'px',
-        top:   ($element.prop('offsetTop') + $element.prop('offsetHeight')) + 'px',
-        width: $element.prop('offsetWidth') + 'px'
-      });
+      var rect   = elements.wrap.getBoundingClientRect(),
+          root   = elements.root.getBoundingClientRect(),
+          top    = rect.bottom - root.top,
+          bot    = root.height - rect.top,
+          left   = rect.left - root.left,
+          width  = rect.width,
+          styles = { left: left + 'px', width: width + 'px' };
+      if (top > bot && root.height - rect.bottom - MENU_PADDING < MAX_HEIGHT) {
+        styles.top = 'auto';
+        styles.bottom = bot + 'px';
+        styles.maxHeight = Math.min(MAX_HEIGHT, rect.top - root.top - MENU_PADDING) + 'px';
+      } else {
+        styles.top = top + 'px';
+        styles.bottom = 'auto';
+        styles.maxHeight = Math.min(MAX_HEIGHT, root.height - rect.bottom - MENU_PADDING) + 'px';
+      }
+      elements.$.ul.css(styles);
     }
 
     function moveDropdown () {
@@ -93,14 +100,19 @@
           : handleSearchText);
       registerSelectedItemWatcher(selectedItemChange);
       $scope.$watch('selectedItem', handleSelectedItemChange);
+      $scope.$watch('$mdAutocompleteCtrl.hidden', function (hidden) {
+        if (hidden) $timeout(positionDropdown, null, false);
+      });
+      angular.element($window).on('resize', positionDropdown);
     }
 
     function gatherElements () {
       elements = {
         main:  $element[0],
-        ul:    $element[0].getElementsByTagName('ul')[0],
-        input: $element[0].getElementsByTagName('input')[0],
-        root:  getNearestContentElement()
+        ul:    $element.find('ul')[0],
+        input: $element.find('input')[0],
+        wrap:  $element.find('md-autocomplete-wrap')[0],
+        root:  $rootElement[0]
       };
       elements.$ = getAngularElements(elements);
     }
@@ -165,7 +177,6 @@
         self.loading = false;
         self.matches = [];
         self.hidden = shouldHide();
-        positionDropdown();
         updateMessages();
       } else {
         handleQuery();
@@ -195,7 +206,7 @@
         case $mdConstant.KEY_CODE.UP_ARROW:
           if (self.loading) return;
           event.preventDefault();
-          self.index = Math.max(0, self.index - 1);
+          self.index = self.index < 0 ? self.matches.length - 1 : Math.max(0, self.index - 1);
           updateScroll();
           updateSelectionMessage();
           break;
@@ -305,9 +316,9 @@
     }
 
     function updateScroll () {
-      var top = 41 * self.index,
-          bot = top + 41,
-          hgt = 41 * 5.5;
+      var top = ITEM_HEIGHT * self.index,
+          bot = top + ITEM_HEIGHT,
+          hgt = elements.ul.clientHeight;
       if (top < elements.ul.scrollTop) {
         elements.ul.scrollTop = top;
       } else if (bot > elements.ul.scrollTop + hgt) {