feat(autocomplete): Add md-autocomplete-snap="width" (#7750)

* add xw-autocomplete-wrap-override

* fix white space and description

* create md-autocomplete-warp="width"

* add md-autocomplete-snap documentation

* move if statement

* add md-autocomplete-snap tests

* fix merge error

Author: aperl

src/components/autocomplete/autocomplete.spec.js

@@ -2659,4 +2659,68 @@ describe('<md-autocomplete>', function() {
     element.remove();
   });
 
-});
+  describe('md-autocomplete-snap', function() {
+    it('should match the width of the snap element if width is set', inject(function($timeout, $material) {
+      var template = '\
+        <div style="width: 1000px" md-autocomplete-snap="width">\
+          <md-autocomplete\
+              md-selected-item="selectedItem"\
+              md-search-text="searchText"\
+              md-items="item in match(searchText)"\
+              md-item-text="item.display"\
+              placeholder="placeholder"\
+              style="width:200px">\
+            <span md-highlight-text="searchText">{{item.display}}</span>\
+          </md-autocomplete>\
+        </div>';
+      var scope = createScope();
+      var element = compile(template, scope);
+      var autoEl = element.find('md-autocomplete');
+      var ctrl = autoEl.controller('mdAutocomplete');
+      var ul = element.find('ul');
+
+      angular.element(document.body).append(element);
+
+      $material.flushInterimElement();
+      ctrl.focus();
+
+      autoEl.scope().searchText = 'fo';
+      waitForVirtualRepeat(autoEl);
+
+      expect(ul[0].offsetWidth).toBe(1000);
+      element.remove();
+    }));
+
+    it('should match the width of the wrap element if width is not set', inject(function($timeout, $material) {
+      var template = '\
+        <div style="width: 1000px" md-autocomplete-snap>\
+          <md-autocomplete\
+              md-selected-item="selectedItem"\
+              md-search-text="searchText"\
+              md-items="item in match(searchText)"\
+              md-item-text="item.display"\
+              placeholder="placeholder"\
+              style="width:200px">\
+            <span md-highlight-text="searchText">{{item.display}}</span>\
+          </md-autocomplete>\
+        </div>';
+      var scope = createScope();
+      var element = compile(template, scope);
+      var autoEl = element.find('md-autocomplete');
+      var ctrl = autoEl.controller('mdAutocomplete');
+      var ul = element.find('ul');
+
+      angular.element(document.body).append(element);
+
+      $material.flushInterimElement();
+      ctrl.focus();
+
+      autoEl.scope().searchText = 'fo';
+      waitForVirtualRepeat(autoEl);
+
+      expect(ul[0].offsetWidth).toBe(200);
+      element.remove();
+    }));
+  });
+
+});

src/components/autocomplete/js/autocompleteController.js

@@ -251,32 +251,50 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
    * Gathers all of the elements needed for this controller
    */
   function gatherElements () {
+
+    var snapWrap = gatherSnapWrap();
+
     elements = {
       main:  $element[0],
       scrollContainer: $element[0].querySelector('.md-virtual-repeat-container'),
       scroller: $element[0].querySelector('.md-virtual-repeat-scroller'),
       ul:    $element.find('ul')[0],
       input: $element.find('input')[0],
-      wrap:  $element.find('md-autocomplete-wrap')[0],
+      wrap:  snapWrap.wrap,
+      snap:  snapWrap.snap,
       root:  document.body
     };
 
     elements.li   = elements.ul.getElementsByTagName('li');
-    elements.snap = getSnapTarget();
     elements.$    = getAngularElements(elements);
 
     inputModelCtrl = elements.$.input.controller('ngModel');
   }
 
   /**
-   * Finds the element that the menu will base its position on
-   * @returns {*}
+   * Gathers the snap and wrap elements
+   *
    */
-  function getSnapTarget () {
-    for (var element = $element; element.length; element = element.parent()) {
-      if (angular.isDefined(element.attr('md-autocomplete-snap'))) return element[ 0 ];
+  function gatherSnapWrap() {
+    var element;
+    var value;
+    for (element = $element; element.length; element = element.parent()) {
+      value = element.attr('md-autocomplete-snap');
+      if (angular.isDefined(value)) break;
     }
-    return elements.wrap;
+
+    if (element.length) {
+      return {
+        snap: element[0],
+        wrap: (value.toLowerCase() === 'width') ? element[0] : $element.find('md-autocomplete-wrap')[0]
+      };
+    }
+
+    var wrap = $element.find('md-autocomplete-wrap')[0];
+    return {
+      snap: wrap,
+      wrap: wrap
+    };
   }
 
   /**

src/components/autocomplete/js/autocompleteDirective.js

@@ -34,7 +34,15 @@ angular
  *
  * There is an example below of how this should look.
  *
+ * ### Snapping Drop-Down
+ *
+ * You can cause the autocomplete drop-down to snap to an ancestor element by applying the
+ *     `md-autocomplete-snap` attribute to that element. You can also snap to the width of
+ *     the `md-autocomplete-snap` element by setting the attribute's value to `width`
+ *     (ie. `md-autocomplete-snap="width"`).
+ *
  * ### Notes
+ *
  * **Autocomplete Dropdown Items Rendering**
  *
  * The `md-autocomplete` uses the the <a ng-href="api/directive/mdVirtualRepeatContainer">VirtualRepeat</a>