From 14ebf662f30aa4385c2573e14d109fdd223ccb21 Mon Sep 17 00:00:00 2001
From: epriestley <git@epriestley.com>
Date: Sat, 16 Jan 2016 13:43:35 -0800
Subject: [PATCH] Don't show the autocompleter until the user types at least
 one character

Summary: Ref T10163. Activate on `@d`, not just `@`. Note that if you type `@d` and then press delete once so you're left with `@`, we stay active (and show the "type a username" hint).

Test Plan:
  - Typed `@`, no completer.
  - Typed `d`, got completer.
  - Typed delete, still had completer, now showing hint prompt.

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T10163

Differential Revision: https://secure.phabricator.com/D15037
---
 resources/celerity/map.php                 | 16 +++++------
 webroot/rsrc/js/phuix/PHUIXAutocomplete.js | 31 +++++++++++++++++-----
 2 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index 112ce12508..8c46a7459c 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' => '569edc21',
+    'rsrc/js/phuix/PHUIXAutocomplete.js' => '377c9b3e',
     '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' => '569edc21',
+    'phuix-autocomplete' => '377c9b3e',
     'phuix-dropdown-menu' => 'bd4c8dca',
     'phuix-form-control-view' => '8fba1997',
     'phuix-icon-view' => 'bff6884b',
@@ -1064,6 +1064,12 @@ 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,12 +1210,6 @@ return array(
       'javelin-vector',
       'javelin-dom',
     ),
-    '569edc21' => array(
-      'javelin-install',
-      'javelin-dom',
-      'phuix-icon-view',
-      'phabricator-prefab',
-    ),
     '56a1ca03' => array(
       'javelin-behavior',
       'javelin-behavior-device',
diff --git a/webroot/rsrc/js/phuix/PHUIXAutocomplete.js b/webroot/rsrc/js/phuix/PHUIXAutocomplete.js
index 8e3eb00481..f8d5bea942 100644
--- a/webroot/rsrc/js/phuix/PHUIXAutocomplete.js
+++ b/webroot/rsrc/js/phuix/PHUIXAutocomplete.js
@@ -32,6 +32,9 @@ JX.install('PHUIXAutocomplete', {
     _focus: null,
     _focusRef: null,
     _listNodes: null,
+    _x: null,
+    _y: null,
+    _visible: false,
 
     setArea: function(area) {
       this._area = area;
@@ -186,6 +189,7 @@ JX.install('PHUIXAutocomplete', {
       JX.DOM.hide(node);
 
       this._active = false;
+      this._visible = false;
     },
 
     _onkeypress: function(e) {
@@ -412,18 +416,33 @@ JX.install('PHUIXAutocomplete', {
 
       this._datasource.didChange(trim);
 
-      var node = this._getNode();
-      node.style.left = x + 'px';
-      node.style.top = y + 'px';
-      JX.DOM.show(node);
+      this._x = x;
+      this._y = y;
 
-      var echo = this._getEchoNode();
       var hint = trim;
-      if (!hint.length) {
+      if (hint.length) {
+        // We only show the autocompleter after the user types at least one
+        // character. For example, "@" does not trigger it, but "@d" does.
+        this._visible = true;
+      } else {
         hint = this._getSpec().hintText;
       }
 
+      var echo = this._getEchoNode();
       JX.DOM.setContent(echo, hint);
+
+      this._redraw();
+    },
+
+    _redraw: function() {
+      if (!this._visible) {
+        return;
+      }
+
+      var node = this._getNode();
+      node.style.left = this._x + 'px';
+      node.style.top = this._y + 'px';
+      JX.DOM.show(node);
     },
 
     _autocomplete: function() {