Show autocomplete suggestions only when input is focused
This change adds a flag that tracks whether or not the input is focused
to conditionally show the suggestions.
Change-Id: I86b09462cd34d8999b41780a8923e61fdf1d88c3
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
index cda2492..97a4f3d 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
@@ -59,7 +59,7 @@
autocomplete="off" />
<div
id="suggestions"
- hidden$="[[_computeSuggestionsHidden(_suggestions)]]">
+ hidden$="[[_computeSuggestionsHidden(_suggestions, _focused)]]">
<ul>
<template is="dom-repeat" items="[[_suggestions]]">
<li
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js
index 4f3cd34..467acb7 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js
@@ -110,6 +110,11 @@
value: false,
},
+ _focused: {
+ type: Boolean,
+ value: false,
+ },
+
},
attached: function() {
@@ -164,8 +169,8 @@
}.bind(this));
},
- _computeSuggestionsHidden: function(suggestions) {
- return !suggestions.length;
+ _computeSuggestionsHidden: function(suggestions, focused) {
+ return !(suggestions.length && focused);
},
_computeClass: function(borderless) {
@@ -229,10 +234,12 @@
var eventPath = Polymer.dom(e).path;
for (var i = 0; i < eventPath.length; i++) {
if (eventPath[i] == this) {
+ this._focused = true;
return;
}
}
this._suggestions = [];
+ this._focused = false;
},
_handleSuggestionTap: function(e) {
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html
index ba1cbd2..63c1b3c 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html
@@ -57,6 +57,7 @@
element.text = 'blah';
assert.isTrue(queryStub.called);
+ element._focused = true;
promise.then(function() {
assert.isFalse(element.$.suggestions.hasAttribute('hidden'));
@@ -69,7 +70,6 @@
}
assert.notEqual(element.$.cursor.index, -1);
-
done();
});
});
@@ -85,6 +85,7 @@
assert.isTrue(element.$.suggestions.hasAttribute('hidden'));
+ element._focused = true;
element.text = 'blah';
promise.then(function() {
@@ -94,7 +95,6 @@
element.addEventListener('cancel', cancelHandler);
MockInteractions.pressAndReleaseKeyOn(element.$.input, 27); // Esc
-
assert.isTrue(cancelHandler.called);
assert.isTrue(element.$.suggestions.hasAttribute('hidden'));
@@ -117,7 +117,7 @@
assert.isTrue(element.$.suggestions.hasAttribute('hidden'));
assert.equal(element.$.cursor.index, -1);
-
+ element._focused = true;
element.text = 'blah';
promise.then(function() {
@@ -265,5 +265,11 @@
MockInteractions.pressAndReleaseKeyOn(element.$.input, 9); // tab
assert.isTrue(commitHandler.called);
});
+
+ test('_focused flag shows/hides the suggestions', function() {
+ var suggestions = ['hello', 'its me'];
+ assert.isTrue(element._computeSuggestionsHidden(suggestions, false));
+ assert.isFalse(element._computeSuggestionsHidden(suggestions, true));
+ });
});
</script>
