Fix sticky hovercard after click
The original logic of checking whether event position is within
the target's bound is preventing hiding hovercard when click on target
The original change does not have enough info on why this is needed: https://gerrit-review.googlesource.com/c/gerrit/+/182370
Removing as manual tests did not show the situation
mentioned in the code comment for that check.
Change-Id: I09d99889d049fc133fccc21484dd055365108bb5
diff --git a/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard-behavior.js b/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard-behavior.js
index 1ba3c23..7828e32 100644
--- a/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard-behavior.js
+++ b/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard-behavior.js
@@ -194,16 +194,6 @@
if (!this._isShowing) {
return;
}
- const targetRect = this._target.getBoundingClientRect();
- const x = e.clientX;
- const y = e.clientY;
- if (x > targetRect.left && x < targetRect.right && y > targetRect.top &&
- y < targetRect.bottom) {
- // Sometimes the hovercard itself obscures the mouse pointer, and
- // that generates a mouseleave event. We don't want to hide the hovercard
- // in that situation.
- return;
- }
// If the user is now hovering over the hovercard or the user is returning
// from the hovercard but now hovering over the target (to stop an annoying
diff --git a/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard_test.html b/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard_test.html
index 99791e7..7280eb2 100644
--- a/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard_test.html
+++ b/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard_test.html
@@ -128,15 +128,39 @@
test('card is scheduled to show on enter and hides on leave', done => {
const button = dom(document).querySelector('button');
assert.isFalse(element._isShowing);
- button.addEventListener('mouseenter', event => {
+ const enterHandler = event => {
assert.isTrue(element._isScheduledToShow);
button.dispatchEvent(new CustomEvent('mouseleave'));
- });
- button.addEventListener('mouseleave', event => {
+ };
+ const leaveHandler = event => {
assert.isFalse(element._isScheduledToShow);
assert.isFalse(element._isShowing);
+ button.removeEventListener('mouseenter', enterHandler);
+ button.removeEventListener('mouseleave', leaveHandler);
done();
- });
+ };
+ button.addEventListener('mouseenter', enterHandler);
+ button.addEventListener('mouseleave', leaveHandler);
+ button.dispatchEvent(new CustomEvent('mouseenter'));
+ });
+
+ test('card should disappear on click', done => {
+ const button = dom(document).querySelector('button');
+ assert.isFalse(element._isShowing);
+ const enterHandler = event => {
+ assert.isTrue(element._isScheduledToShow);
+ // click to hide
+ MockInteractions.tap(button);
+ };
+ const leaveHandler = event => {
+ assert.isFalse(element._isScheduledToShow);
+ assert.isFalse(element._isShowing);
+ button.removeEventListener('mouseenter', enterHandler);
+ button.removeEventListener('click', leaveHandler);
+ done();
+ };
+ button.addEventListener('mouseenter', enterHandler);
+ button.addEventListener('click', leaveHandler);
button.dispatchEvent(new CustomEvent('mouseenter'));
});
});
