From 849b4c765a1f02622b4adb134417f8c2945232d1 Mon Sep 17 00:00:00 2001
From: epriestley <git@epriestley.com>
Date: Sat, 16 Jan 2016 14:00:02 -0800
Subject: [PATCH] When the autocompleter would fall off the bottom of the
 screen, put it above the text instead

Summary: Ref T10163. In cases like Conpherence, the autocompleter can currently render off the bottom of the screen. Put it above if it would be offscreen.

Test Plan: {F1062286}

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T10163

Differential Revision: https://secure.phabricator.com/D15038
---
 resources/celerity/map.php                 | 16 ++++++++--------
 webroot/rsrc/js/phuix/PHUIXAutocomplete.js | 22 ++++++++++++++++++++--
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index 8c46a7459c..d4cccb53eb 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -507,7 +507,7 @@ return array(
     'rsrc/js/phui/behavior-phui-object-box-tabs.js' => '2bfa2836',
     'rsrc/js/phuix/PHUIXActionListView.js' => 'b5c256b8',
     'rsrc/js/phuix/PHUIXActionView.js' => '8cf6d262',
-    'rsrc/js/phuix/PHUIXAutocomplete.js' => '377c9b3e',
+    'rsrc/js/phuix/PHUIXAutocomplete.js' => '5582787f',
     'rsrc/js/phuix/PHUIXDropdownMenu.js' => 'bd4c8dca',
     'rsrc/js/phuix/PHUIXFormControl.js' => '8fba1997',
     'rsrc/js/phuix/PHUIXIconView.js' => 'bff6884b',
@@ -836,7 +836,7 @@ return array(
     'phui-workpanel-view-css' => 'adec7699',
     'phuix-action-list-view' => 'b5c256b8',
     'phuix-action-view' => '8cf6d262',
-    'phuix-autocomplete' => '377c9b3e',
+    'phuix-autocomplete' => '5582787f',
     'phuix-dropdown-menu' => 'bd4c8dca',
     'phuix-form-control-view' => '8fba1997',
     'phuix-icon-view' => 'bff6884b',
@@ -1064,12 +1064,6 @@ return array(
       'javelin-vector',
       'phuix-autocomplete',
     ),
-    '377c9b3e' => array(
-      'javelin-install',
-      'javelin-dom',
-      'phuix-icon-view',
-      'phabricator-prefab',
-    ),
     '3ab51e2c' => array(
       'javelin-behavior',
       'javelin-behavior-device',
@@ -1204,6 +1198,12 @@ return array(
       'javelin-request',
       'javelin-typeahead-source',
     ),
+    '5582787f' => array(
+      'javelin-install',
+      'javelin-dom',
+      'phuix-icon-view',
+      'phabricator-prefab',
+    ),
     '558829c2' => array(
       'javelin-stratcom',
       'javelin-behavior',
diff --git a/webroot/rsrc/js/phuix/PHUIXAutocomplete.js b/webroot/rsrc/js/phuix/PHUIXAutocomplete.js
index f8d5bea942..eaf592e65b 100644
--- a/webroot/rsrc/js/phuix/PHUIXAutocomplete.js
+++ b/webroot/rsrc/js/phuix/PHUIXAutocomplete.js
@@ -232,6 +232,8 @@ JX.install('PHUIXAutocomplete', {
       if (this._focus === null && nodes.length) {
         this._setFocus(0);
       }
+
+      this._redraw();
     },
 
     _setFocus: function(idx) {
@@ -440,9 +442,25 @@ JX.install('PHUIXAutocomplete', {
       }
 
       var node = this._getNode();
-      node.style.left = this._x + 'px';
-      node.style.top = this._y + 'px';
       JX.DOM.show(node);
+
+      var p = new JX.Vector(this._x, this._y);
+      var s = JX.Vector.getScroll();
+      var v = JX.Vector.getViewport();
+
+      // If the menu would run off the bottom of the screen when showing the
+      // maximum number of possible choices, put it above instead. We're doing
+      // this based on the maximum size so the menu doesn't jump up and down
+      // as results arrive.
+
+      var option_height = 30;
+      var extra_margin = 24;
+      if ((s.y + v.y) < (p.y + (5 * option_height) + extra_margin)) {
+        var d = JX.Vector.getDim(node);
+        p.y = p.y - d.y - 36;
+      }
+
+      p.setPos(node);
     },
 
     _autocomplete: function() {