From b13437044147cecf6835850c95fc764a67d466d0 Mon Sep 17 00:00:00 2001
From: Robert Messerle <rmesserle@google.com>
Date: Wed, 8 Apr 2015 13:02:43 -0700
Subject: [PATCH] feat(autocomplete): dropdown will now stretch to accomodate
 longer text

Size logic is smart enough to find the maximum possible size based on either left or right horizontal snapping.  If the content is larger than this, it will use an ellipsis overflow by default.
---
 src/components/autocomplete/autocomplete.scss   |  5 ++---
 .../autocomplete/js/autocompleteController.js   | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/autocomplete/autocomplete.scss b/src/components/autocomplete/autocomplete.scss
index 802b915ff43..1e3ab895ee0 100644
--- a/src/components/autocomplete/autocomplete.scss
+++ b/src/components/autocomplete/autocomplete.scss
@@ -170,9 +170,6 @@ 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;
@@ -190,6 +187,8 @@ md-autocomplete {
     transition: background 0.15s linear;
     cursor: pointer;
     margin: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
     &.ng-enter,
     &.ng-hide-remove {
       transition: none;
diff --git a/src/components/autocomplete/js/autocompleteController.js b/src/components/autocomplete/js/autocompleteController.js
index 3b9a0fbe16e..26dfb2695cc 100644
--- a/src/components/autocomplete/js/autocompleteController.js
+++ b/src/components/autocomplete/js/autocompleteController.js
@@ -71,7 +71,12 @@
           bot    = root.height - vrect.top,
           left   = hrect.left - root.left,
           width  = hrect.width,
-          styles = { left: left + 'px', width: width + 'px' };
+          styles = {
+            left:     left + 'px',
+            minWidth: width + 'px',
+            maxWidth: Math.max(hrect.right - root.left, root.right - hrect.left) - MENU_PADDING + 'px',
+            opacity:  0
+          };
       if (top > bot && root.height - hrect.bottom - MENU_PADDING < MAX_HEIGHT) {
         styles.top = 'auto';
         styles.bottom = bot + 'px';
@@ -81,7 +86,17 @@
         styles.bottom = 'auto';
         styles.maxHeight = Math.min(MAX_HEIGHT, root.height - hrect.bottom - MENU_PADDING) + 'px';
       }
+      $timeout(correctHorizontalAlignment, 0, false);
       elements.$.ul.css(styles);
+
+      function correctHorizontalAlignment () {
+        var dropdown = elements.ul.getBoundingClientRect(),
+            styles   = { opacity: 1 };
+        if (dropdown.right > root.right - MENU_PADDING) {
+          styles.left = (hrect.right - dropdown.width) + 'px';
+        }
+        elements.$.ul.css(styles);
+      }
     }
 
     function moveDropdown () {