fix(select): fixes positioning of select menu and sets it to append to the body again

Closes #6044

Author: Robert Messerle

docs/config/template/index.template.html

@@ -56,8 +56,8 @@ <h2 class="menu-heading md-subhead" ng-if="section.type === 'heading'" id="headi
   <div layout="column" tabIndex="-1" role="main" flex>
     <md-toolbar class="md-whiteframe-glow-z1 site-content-toolbar">
 
-      <div class="md-toolbar-tools docs-toolbar-tools" ng-click="openMenu()" tabIndex="-1">
-        <md-button class="md-icon-button" hide-gt-sm aria-label="Toggle Menu">
+      <div class="md-toolbar-tools docs-toolbar-tools" tabIndex="-1">
+        <md-button class="md-icon-button" ng-click="openMenu()" hide-gt-sm aria-label="Toggle Menu">
           <md-icon md-svg-src="img/icons/ic_menu_24px.svg"></md-icon>
         </md-button>
         <div layout="row" flex class="fill-height">

src/components/select/select.js

@@ -452,7 +452,6 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $compile, $par
           element: selectContainer,
           target: element[0],
           preserveElement: true,
-          parent: element,
           hasBackdrop: true,
           loadingAsync: attr.mdOnOpen ? scope.$eval(attr.mdOnOpen) || true : false
         }).finally(function() {
@@ -1239,7 +1238,7 @@ function SelectProvider($$interimElementProvider) {
      * trigger the [optional] user-defined expression
      */
     function announceClosed(opts) {
-      var mdSelect = opts.selectEl.controller('mdSelect');
+      var mdSelect = opts.target.controller('mdSelect');
       if (mdSelect) {
         var menuController = opts.selectEl.controller('mdSelectMenu');
         mdSelect.setLabelText(menuController.selectedLabels());
@@ -1254,7 +1253,7 @@ function SelectProvider($$interimElementProvider) {
     function calculateMenuPositions(scope, element, opts) {
       var 
         containerNode = element[0],
-        targetNode = opts.target[0].children[1], // target the label
+        targetNode = opts.target[0].children[0], // target the label
         parentNode = $document[0].body,
         selectNode = opts.selectEl[0],
         contentNode = opts.contentEl[0],

src/components/select/select.spec.js

@@ -1,9 +1,22 @@
 describe('<md-select>', function() {
-  var attachedElements = [];
+  var attachedElements = [],
+      body;
 
   beforeEach(module('material.components.input'));
   beforeEach(module('material.components.select'));
 
+  beforeEach(inject(function($document) {
+    body = $document[0].body;
+  }));
+
+  afterEach(inject(function ($document) {
+    var body = $document[0].body;
+    var children = body.querySelectorAll('.md-select-menu-container');
+    for (var i = 0; i < children.length; i++) {
+      angular.element(children[i]).remove();
+    }
+  }));
+
   afterEach(inject(function($document) {
     attachedElements.forEach(function(element) {
       element.remove();
@@ -39,7 +52,7 @@ describe('<md-select>', function() {
     var select = setupSelect('ng-model="val", md-container-class="test"').find('md-select');
     openSelect(select);
 
-    var container = select[0].querySelector('.md-select-menu-container');
+    var container = body.querySelector('.md-select-menu-container');
     expect(container).toBeTruthy();
     expect(container.classList.contains('test')).toBe(true);
   }));
@@ -720,7 +733,7 @@ describe('<md-select>', function() {
       openSelect(el);
       expect(el.attr('aria-expanded')).toBe('true');
 
-      var selectMenu = el.find('md-select-menu');
+      var selectMenu = $document.find('md-select-menu');
       pressKey(selectMenu, 27);
       waitForSelectClose();
 
@@ -793,7 +806,7 @@ describe('<md-select>', function() {
         var el = setupSelect('ng-model="someVal"', [1, 2, 3]).find('md-select');
         openSelect(el);
         expectSelectOpen(el);
-        var selectMenu = angular.element(el.find('md-select-menu'));
+        var selectMenu = $document.find('md-select-menu');
         expect(selectMenu.length).toBe(1);
         pressKey(selectMenu, 27);
         waitForSelectClose();
@@ -906,8 +919,8 @@ describe('<md-select>', function() {
   function clickOption(select, index) {
     inject(function($rootScope, $document) {
       expectSelectOpen(select);
-      var openMenu = select.find('md-select-menu');
-      var opt = angular.element(select.find('md-option')[index]).find('div')[0];
+      var openMenu = $document.find('md-select-menu');
+      var opt = angular.element(openMenu.find('md-option')[index]).find('div')[0];
 
       if (!opt) throw Error('Could not find option at index: ' + index);
       var target = angular.element(opt);
@@ -925,14 +938,16 @@ describe('<md-select>', function() {
 
   function expectSelectClosed(element) {
     element = angular.element(element);
-    var menu = angular.element(element[0].querySelector('.md-select-menu-container'));
-    expect(menu.hasClass('md-active')).toBe(false);
-    expect(menu.attr('aria-hidden')).toBe('true');
+    var menu = angular.element(body.querySelector('.md-select-menu-container'));
+    if (menu.length) {
+      expect(menu.hasClass('md-active')).toBe(false);
+      expect(menu.attr('aria-hidden')).toBe('true');
+    }
   }
 
   function expectSelectOpen(element) {
     element = angular.element(element);
-    var menu = angular.element(element[0].querySelector('.md-select-menu-container'));
+    var menu = angular.element(body.querySelector('.md-select-menu-container'));
     expect(menu.hasClass('md-active')).toBe(true);
     expect(menu.attr('aria-hidden')).toBe('false');
   }