opendev/gerrit
Code Issues Proposed changes

Fix issue where dropdown position is incorrect with page scroll

Browse Source 
gr-textarea did not take into account scroll position when positioning
the emoji dropdown. This fixes it by adding scrollTop to non-fixed
position textareas.

Change-Id: I490d03443b4ca910602ab0636f3dfc19957fdd89
This commit is contained in:
Becky Siegel
2017-05-25 14:32:12 -07:00
parent 9fddabb27e
commit a2df326368
2 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.js
View File

@@ -206,6 +206,10 @@
10); 10);
}, },
_getScrollTop() {
return document.body.scrollTop;
},
/** /**
* This positions the dropdown to be just below the cursor position. It is * This positions the dropdown to be just below the cursor position. It is
* calculated by having a hidden element with the same width and styling of * calculated by having a hidden element with the same width and styling of
@@ -219,7 +223,12 @@
const caratPosition = this._getPositionOfCursor(); const caratPosition = this._getPositionOfCursor();
const fontSize = this._getFontSize(); const fontSize = this._getFontSize();
const top = caratPosition.top + fontSize + VERTICAL_OFFSET + 'px'; let top = caratPosition.top + fontSize + VERTICAL_OFFSET;
if (!this.fixedPositionDropdown) {
top += this._getScrollTop();
}
top += 'px';
const left = caratPosition.left + 'px'; const left = caratPosition.left + 'px';
this.$.emojiSuggestions.setPosition(top, left); this.$.emojiSuggestions.setPosition(top, left);
}, },

9
polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea_test.html
View File

@@ -181,9 +181,12 @@ limitations under the License.
sandbox.stub(element, '_getPositionOfCursor', () => { sandbox.stub(element, '_getPositionOfCursor', () => {
return {top: 100, left: 30}; return {top: 100, left: 30};
}); });
sandbox.stub(element, '_getFontSize', () => { sandbox.stub(element, '_getFontSize', () => 12);
return 12; sandbox.stub(element, '_getScrollTop', () => 100);
}); element._updateSelectorPosition();
assert.isTrue(setPositionSpy.lastCall.calledWithExactly('219px', '30px'));
element.fixedPositionDropdown = true;
element._updateSelectorPosition(); element._updateSelectorPosition();
assert.isTrue(setPositionSpy.lastCall.calledWithExactly('119px', '30px')); assert.isTrue(setPositionSpy.lastCall.calledWithExactly('119px', '30px'));
}); });