feat(autocomplete): add md-dropdown-position option (#9774)

Because obstructions in the viewport (liked fixed-position elements) cannot be automatically detected, allow users to override top/bottom positioning when needed.

Usage:

```html
<md-autocomplete md-items="item in ctrl.querySearch(ctrl.searchText)"
                 md-dropdown-position="bottom"
                 ...
```

Fixes #9769.

Author: donmccurdy

src/components/autocomplete/autocomplete.spec.js

@@ -2246,6 +2246,54 @@ describe('<md-autocomplete>', function() {
       document.body.removeChild(parent[0]);
     }));
 
+    it('should allow dropdown position to be specified', inject(function($timeout, $window) {
+      var scope = createScope();
+
+      scope.match = fakeItemMatch;
+      scope.position = 'top';
+
+      var template = '<div>' +
+          '<md-autocomplete ' +
+          'md-search-text="searchText" ' +
+          'md-items="item in match(searchText)" ' +
+          'md-item-text="item" ' +
+          'md-min-length="0" ' +
+          'md-dropdown-position="{{position}}" ' +
+          'placeholder="placeholder">' +
+        '<span md-highlight-text="searchText">{{item}}</span>' +
+      '</md-autocomplete>' +
+      '</div>';
+
+      var parent = compile(template, scope);
+      var element = parent.find('md-autocomplete');
+      var ctrl = element.controller('mdAutocomplete');
+
+      // Add container to the DOM to be able to test the rect calculations.
+      document.body.appendChild(parent[0]);
+
+      $timeout.flush();
+
+      // Focus the autocomplete and trigger a query to be able to open the dropdown.
+      ctrl.focus();
+      scope.$apply('searchText = "Query 1"');
+      waitForVirtualRepeat(element);
+
+      var scrollContainer = document.body.querySelector('.md-virtual-repeat-container');
+
+      expect(scrollContainer).toBeTruthy();
+      expect(scrollContainer.style.top).toBe('auto');
+      expect(scrollContainer.style.bottom).toMatch(/[0-9]+px/);
+
+      // Change position and resize to force a DOM update.
+      scope.$apply('position = "bottom"');
+      angular.element($window).triggerHandler('resize');
+
+      expect(scrollContainer.style.top).toMatch(/[0-9]+px/);
+      expect(scrollContainer.style.bottom).toBe('auto');
+
+      parent.remove();
+    }));
+
   });
 
   describe('md-highlight-text', function() {

src/components/autocomplete/js/autocompleteController.js

@@ -113,7 +113,13 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
         left   = hrect.left - root.left,
         width  = hrect.width,
         offset = getVerticalOffset(),
+        position = $scope.dropdownPosition,
         styles;
+
+    // Automatically determine dropdown placement based on available space in viewport.
+    if (!position) {
+      position = (top > bot && root.height - hrect.bottom - MENU_PADDING < dropdownHeight) ? 'top' : 'bottom';
+    }
     // Adjust the width to account for the padding provided by `md-input-container`
     if ($attrs.mdFloatingLabel) {
       left += INPUT_PADDING;
@@ -124,7 +130,8 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
       minWidth: width + 'px',
       maxWidth: Math.max(hrect.right - root.left, root.right - hrect.left) - MENU_PADDING + 'px'
     };
-    if (top > bot && root.height - hrect.bottom - MENU_PADDING < dropdownHeight) {
+
+    if (position === 'top') {
       styles.top       = 'auto';
       styles.bottom    = bot + 'px';
       styles.maxHeight = Math.min(dropdownHeight, hrect.top - root.top - MENU_PADDING) + 'px';

src/components/autocomplete/js/autocompleteDirective.js

@@ -114,6 +114,7 @@ angular
  *     the dropdown.<br/><br/>
  *     When the dropdown doesn't fit into the viewport, the dropdown will shrink
  *     as less as possible.
+ * @param {string=} md-dropdown-position Overrides the default dropdown position. Options: `top`, `bottom`.
  * @param {string=} ng-trim If set to false, the search text will be not trimmed automatically.
  *     Defaults to true.
  * @param {string=} ng-pattern Adds the pattern validator to the ngModel of the search text.
@@ -230,7 +231,8 @@ function MdAutocomplete ($$mdSvgRegistry) {
       menuClass:        '@?mdMenuClass',
       inputId:          '@?mdInputId',
       escapeOptions:    '@?mdEscapeOptions',
-      dropdownItems:    '=?mdDropdownItems'
+      dropdownItems:    '=?mdDropdownItems',
+      dropdownPosition: '@?mdDropdownPosition'
     },
     compile: function(tElement, tAttrs) {
       var attributes = ['md-select-on-focus', 'md-no-asterisk', 'ng-trim', 'ng-pattern'];