commit e3dc58a70af7e959c5d8e2ad845f8ace6cf0d65c
author Milutin Kristofic <milutin@google.com> Mon May 17 23:01:10 2021 +0200
committer Milutin Kristofic <milutin@google.com> Mon May 17 23:01:10 2021 +0200
tree 1f0251b637102f702357e782ed5a9e6fc4acf908
parent ec8d7c0c6dc2c2792a1ed12f9ffd78d13c08998e

Fix blinking tooltip

On Dashboard when a mouse cursor hovers over WIP change status, tooltip
is blinking. It happens because tooltip is shown over a mouse cursor
which is causing mouseleave on gr-tooltip-content which hides tooltip.
When tooltip is hidden, on mouseenter tooltip is shown.

This change hides tooltip only when a mouse cursor leaves gr-tooltip
and gr-tooltip-content.

Change-Id: Iff22b77009d93139ab62d5731e0239513e86589f

polygerrit-ui/app/mixins/gr-tooltip-mixin/gr-tooltip-mixin.ts

diff --git a/polygerrit-ui/app/mixins/gr-tooltip-mixin/gr-tooltip-mixin.ts b/polygerrit-ui/app/mixins/gr-tooltip-mixin/gr-tooltip-mixin.ts
index e60c614..a5b25d9 100644
--- a/polygerrit-ui/app/mixins/gr-tooltip-mixin/gr-tooltip-mixin.ts
+++ b/polygerrit-ui/app/mixins/gr-tooltip-mixin/gr-tooltip-mixin.ts
@@ -76,21 +76,21 @@
       private readonly showHandler: () => void;
 
       // Handler for hiding the tooltip, will be attached to certain events
-      private readonly hideHandler: () => void;
+      private readonly hideHandler: (e: Event) => void;
 
       // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
       constructor(..._: any[]) {
         super();
         this.windowScrollHandler = () => this._handleWindowScroll();
         this.showHandler = () => this._handleShowTooltip();
-        this.hideHandler = () => this._handleHideTooltip();
+        this.hideHandler = (e: Event | undefined) => this._handleHideTooltip(e);
       }
 
       /** @override */
       disconnectedCallback() {
         // NOTE: if you define your own `detached` in your component
         // then this won't take affect (as its not a class yet)
-        this._handleHideTooltip();
+        this._handleHideTooltip(undefined);
         if (this.mouseenterHandler) {
           this.removeEventListener('mouseenter', this.mouseenterHandler);
         }
@@ -153,20 +153,30 @@
         window.addEventListener('scroll', this.windowScrollHandler);
         this.addEventListener('mouseleave', this.hideHandler);
         this.addEventListener('click', this.hideHandler);
+        tooltip.addEventListener('mouseleave', this.hideHandler);
       }
 
-      _handleHideTooltip() {
+      _handleHideTooltip(e: Event | undefined) {
         if (this._isTouchDevice) {
           return;
         }
         if (!this.hasAttribute('title') || !this._titleText) {
           return;
         }
+        // Do not hide if mouse left this or this._tooltip and came to this or
+        // this._tooltip
+        if (
+          (e as MouseEvent)?.relatedTarget === this._tooltip ||
+          (e as MouseEvent)?.relatedTarget === this
+        ) {
+          return;
+        }
 
         window.removeEventListener('scroll', this.windowScrollHandler);
         this.removeEventListener('mouseleave', this.hideHandler);
         this.removeEventListener('click', this.hideHandler);
         this.setAttribute('title', this._titleText);
+        this._tooltip?.removeEventListener('mouseleave', this.hideHandler);
 
         if (this._tooltip?.parentNode) {
           this._tooltip.parentNode.removeChild(this._tooltip);