[ML] Fixes a race condition where the chart tooltip could be hidden even if it should be shown. (#23270)
- Even with the check if fadeTimeout was set in show(), I could reproduce race conditions where a new tooltip would disappear again, because a previous fadeTimeout would trigger and set the new tooltips display to none. - This PR fixes it by adding a non-asynchronous visible flag to mlChartTooltipService to check if the tooltip should stay visible if fadeTimeout triggers.
This commit is contained in:
parent
cae4443c0b
commit
c940c6d111
1 changed files with 7 additions and 1 deletions
|
@ -14,6 +14,7 @@ const FADE_TIMEOUT_MS = 200;
|
|||
export const mlChartTooltipService = {
|
||||
element: null,
|
||||
fadeTimeout: null,
|
||||
visible: false
|
||||
};
|
||||
|
||||
mlChartTooltipService.show = function (contents, target, offset = { x: 0, y: 0 }) {
|
||||
|
@ -21,6 +22,7 @@ mlChartTooltipService.show = function (contents, target, offset = { x: 0, y: 0 }
|
|||
return;
|
||||
}
|
||||
|
||||
this.visible = true;
|
||||
// if a previous fade out was happening, stop it
|
||||
if (this.fadeTimeout !== null) {
|
||||
clearTimeout(this.fadeTimeout);
|
||||
|
@ -64,6 +66,8 @@ mlChartTooltipService.hide = function () {
|
|||
return;
|
||||
}
|
||||
|
||||
this.visible = false;
|
||||
|
||||
this.element.css({
|
||||
opacity: '0',
|
||||
});
|
||||
|
@ -71,7 +75,9 @@ mlChartTooltipService.hide = function () {
|
|||
// after the fade out transition has finished, set the display to
|
||||
// none so it doesn't block any mouse events underneath it.
|
||||
this.fadeTimeout = setTimeout(() => {
|
||||
this.element.css('display', 'none');
|
||||
if (this.visible === false) {
|
||||
this.element.css('display', 'none');
|
||||
}
|
||||
this.fadeTimeout = null;
|
||||
}, FADE_TIMEOUT_MS);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue