fix(autocomplete): moves autocomplete dropdown to nearest content container

Closes #2013
Closes #1961
Closes #1670

Author: Robert Messerle

src/components/autocomplete/autocomplete-theme.scss

@@ -1,4 +1,4 @@
-md-autocomplete {
+md-autocomplete.md-THEME_NAME-theme {
   background: '{{background-50}}';
   button {
     md-icon {
@@ -10,18 +10,18 @@ md-autocomplete {
       background: '{{background-600-0.3}}';
     }
   }
-  ul {
-    background: '{{background-50}}';
-    li {
-      border-top: 1px solid '{{background-400}}';
-      color: '{{background-900}}';
-      .highlight {
-        color: '{{background-600}}';
-      }
-      &:hover,
-      &.selected {
-        background: '{{background-200}}';
-      }
+}
+.md-autocomplete-suggestions.md-THEME_NAME-theme {
+  background: '{{background-50}}';
+  li {
+    border-top: 1px solid '{{background-300}}';
+    color: '{{background-900}}';
+    .highlight {
+      color: '{{background-600}}';
+    }
+    &:hover,
+    &.selected {
+      background: '{{background-200}}';
     }
   }
 }

src/components/autocomplete/autocomplete.scss

@@ -27,9 +27,6 @@
     height: 40px;
   }
 }
-md-content {
-  overflow: visible;
-}
 md-autocomplete {
   box-shadow: 0 2px 5px rgba(black, 0.25);
   border-radius: 2px;
@@ -98,7 +95,6 @@ md-autocomplete {
     line-height: 40px;
     height: 40px;
     outline: none;
-    z-index: 2;
     background: transparent;
     &::-ms-clear {
       display: none;
@@ -109,7 +105,6 @@ md-autocomplete {
     top: 10px;
     right: 10px;
     line-height: 20px;
-    z-index: 2;
     text-align: center;
     width: 20px;
     height: 20px;
@@ -130,7 +125,6 @@ md-autocomplete {
       transform: scale(0);
       opacity: 0;
       transition: $swift-ease-out;
-      z-index: -1;
     }
     &:focus {
       outline: none;
@@ -163,40 +157,6 @@ md-autocomplete {
       }
     }
   }
-  ul {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    box-shadow: 0 2px 5px rgba(black, 0.25);
-    margin: 0;
-    list-style: none;
-    padding: 0;
-    overflow: auto;
-    max-height: 41px * 5.5;
-    z-index: $z-index-backdrop - 1;
-    li {
-      border-top: 1px solid #ddd;
-      padding: 0 15px;
-      line-height: 40px;
-      font-size: 14px;
-      overflow: hidden;
-      height: 40px;
-      transition: background 0.15s linear;
-      cursor: pointer;
-      margin: 0;
-      &.ng-enter,
-      &.ng-hide-remove {
-        transition: none;
-        animation: md-autocomplete-list-in 0.2s;
-      }
-      &.ng-leave,
-      &.ng-hide-add {
-        transition: none;
-        animation: md-autocomplete-list-out 0.2s;
-      }
-    }
-  }
   @media screen and (-ms-high-contrast: active) {
     $border-color: #fff;
 
@@ -208,3 +168,37 @@ md-autocomplete {
     }
   }
 }
+.md-autocomplete-suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  box-shadow: 0 2px 5px rgba(black, 0.25);
+  margin: 0;
+  list-style: none;
+  padding: 0;
+  overflow: auto;
+  max-height: 41px * 5.5;
+  z-index: $z-index-backdrop - 1;
+  li {
+    border-top: 1px solid #ddd;
+    padding: 0 15px;
+    line-height: 40px;
+    font-size: 14px;
+    overflow: hidden;
+    height: 40px;
+    transition: background 0.15s linear;
+    cursor: pointer;
+    margin: 0;
+    &.ng-enter,
+    &.ng-hide-remove {
+      transition: none;
+      animation: md-autocomplete-list-in 0.2s;
+    }
+    &.ng-leave,
+    &.ng-hide-add {
+      transition: none;
+      animation: md-autocomplete-list-out 0.2s;
+    }
+  }
+}

src/components/autocomplete/autocomplete.spec.js

@@ -28,7 +28,7 @@ describe('<md-autocomplete>', function() {
   }
 
   describe('basic functionality', function () {
-    it('should fail', inject(function($timeout, $mdConstant) {
+    it('should fail', inject(function($timeout, $mdConstant, $rootElement) {
       var scope = createScope();
       var template = '\
           <md-autocomplete\

src/components/autocomplete/js/autocompleteController.js

@@ -4,7 +4,7 @@
       .module('material.components.autocomplete')
       .controller('MdAutocompleteCtrl', MdAutocompleteCtrl);
 
-  function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $timeout) {
+  function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $timeout, $rootElement, $mdTheming) {
 
     //-- private variables
 
@@ -54,9 +54,34 @@
       $timeout(function () {
         gatherElements();
         focusElement();
+        moveDropdown();
       });
     }
 
+    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'
+      });
+    }
+
+    function moveDropdown () {
+      if (!elements.$.root.length) return;
+      $mdTheming(elements.$.ul);
+      elements.$.ul.detach();
+      elements.$.root.append(elements.$.ul);
+    }
+
     function focusElement () {
       if ($scope.autofocus) elements.input.focus();
     }
@@ -74,8 +99,18 @@
       elements = {
         main:  $element[0],
         ul:    $element[0].getElementsByTagName('ul')[0],
-        input: $element[0].getElementsByTagName('input')[0]
+        input: $element[0].getElementsByTagName('input')[0],
+        root:  getNearestContentElement()
       };
+      elements.$ = getAngularElements(elements);
+    }
+
+    function getAngularElements (elements) {
+      var obj = {};
+      for (var key in elements) {
+        obj[key] = angular.element(elements[key]);
+      }
+      return obj;
     }
 
     //-- event/change handlers
@@ -130,6 +165,7 @@
         self.loading = false;
         self.matches = [];
         self.hidden = shouldHide();
+        positionDropdown();
         updateMessages();
       } else {
         handleQuery();

src/components/autocomplete/js/autocompleteDirective.js

@@ -39,7 +39,7 @@
    * </hljs>
    */
 
-  function MdAutocomplete () {
+  function MdAutocomplete ($mdTheming) {
     return {
       controller:   'MdAutocompleteCtrl',
       controllerAs: '$mdAutocompleteCtrl',
@@ -112,6 +112,7 @@
                 ng-if="$mdAutocompleteCtrl.loading"\
                 md-mode="indeterminate"></md-progress-linear>\
             <ul role="presentation"\
+                class="md-autocomplete-suggestions"\
                 id="ul-{{$mdAutocompleteCtrl.id}}"\
                 ng-mouseenter="$mdAutocompleteCtrl.listEnter()"\
                 ng-mouseleave="$mdAutocompleteCtrl.listLeave()"\
@@ -141,6 +142,7 @@
           scope[key] = attr.hasOwnProperty(attr.$normalize(binding.attrName));
         }
       });
+      $mdTheming(element);
     }
   }
 })();

src/components/autocomplete/js/listItemDirective.js

@@ -6,13 +6,13 @@
 
   function MdAutocompleteListItem ($compile, $mdUtil) {
     return {
-      require: '^?mdAutocomplete',
       terminal: true,
       link: link,
       scope: false
     };
-    function link (scope, element, attr, ctrl) {
-      var newScope = ctrl.parent.$new(false, ctrl.parent),
+    function link (scope, element, attr) {
+      var ctrl     = scope.$parent.$mdAutocompleteCtrl,
+          newScope = ctrl.parent.$new(false, ctrl.parent),
           itemName = ctrl.scope.$eval(attr.mdAutocompleteListItem);
       newScope[itemName] = scope.item;
       element.html(ctrl.scope.$eval(attr.mdAutocompleteListItemTemplate));