Fix editable-label losing focus
The editable label was setting focus on the dropdown immediately due to
it awaiting the wrong exit condition for _awaitOpen, resulting in a
race where focus was only sometimes set on the input.
The function was borrowed from gr-overlay, which has styles applied to
it directly. In the case of the editable label, we must wait for the
style to be set on the dropdown instead.
Bug: Issue 8980
Change-Id: I31439a2065159976a9aeda52efd366914cae617f
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js
index f943b8e..b7d65d3 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js
@@ -92,7 +92,7 @@
_showDropdown() {
if (this.readOnly || this.editing) { return; }
- this._open().then(() => {
+ return this._open().then(() => {
this.$.input.$.input.focus();
if (!this.$.input.value) { return; }
this.$.input.$.input.setSelectionRange(0, this.$.input.value.length);
@@ -118,7 +118,7 @@
let iters = 0;
const step = () => {
this.async(() => {
- if (this.style.display !== 'none') {
+ if (this.$.dropdown.style.display !== 'none') {
fn.call(this);
} else if (iters++ < AWAIT_MAX_ITERS) {
step.call(this);
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_test.html b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_test.html
index 058654b..6815173 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_test.html
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_test.html
@@ -77,14 +77,17 @@
assert.isFalse(element.$.dropdown.opened);
assert.isTrue(label.classList.contains('editable'));
assert.equal(label.textContent, 'value text');
+ const focusSpy = sandbox.spy(element.$.input.$.input, 'focus');
+ const showSpy = sandbox.spy(element, '_showDropdown');
MockInteractions.tap(label);
- Polymer.dom.flush();
-
- // The dropdown is open (which covers up the label):
- assert.isTrue(element.$.dropdown.opened);
- assert.equal(input.value, 'value text');
+ return showSpy.lastCall.returnValue.then(() => {
+ // The dropdown is open (which covers up the label):
+ assert.isTrue(element.$.dropdown.opened);
+ assert.isTrue(focusSpy.called);
+ assert.equal(input.value, 'value text');
+ });
});
test('title with placeholder', done => {
