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() {