Do not apply sticky tooltip on double click (#5754)

Author: arai-a

src/components/shared/chart/Canvas.tsx

@@ -327,6 +327,17 @@ export class ChartCanvas<Item> extends React.Component<
 
   _onDoubleClick = () => {
     this.props.onDoubleClickItem(this.state.hoveredItem);
+
+    if (this.props.stickyTooltips) {
+      // The double click is received as a sequence of click + click + dblclick.
+      // The each click sets the selectedItem inside _onClick.
+      //
+      // Unset the selectedItem here to differentiate the behavior between
+      // the single click vs the double clicks.
+      this.setState(() => ({
+        selectedItem: null,
+      }));
+    }
   };
 
   _getHoveredItemInfo = (): React.ReactNode => {

src/test/components/MarkerChart.test.tsx

@@ -319,7 +319,7 @@ describe('MarkerChart', function () {
     // No tooltip displayed yet
     expect(document.querySelector('.tooltip')).toBeFalsy();
 
-    function leftClick(pos: { x: CssPixels; y: CssPixels }) {
+    function leftClick(pos: { x: CssPixels; y: CssPixels }, dblClick = false) {
       const positioningOptions = {
         offsetX: pos.x,
         offsetY: pos.y,
@@ -333,7 +333,7 @@ describe('MarkerChart', function () {
       // Because different components listen to different events, we trigger
       // all the right events, to be as close as possible to the real stuff.
       fireMouseEvent('mousemove', positioningOptions);
-      fireFullClick(canvas, positioningOptions);
+      fireFullClick(canvas, positioningOptions, dblClick);
       flushRafCalls();
     }
 
@@ -365,6 +365,20 @@ describe('MarkerChart', function () {
 
     // Now the tooltip should not be displayed.
     expect(document.querySelector('.tooltip')).toBeFalsy();
+
+    // The tooltip should be displayed also on double click.
+    leftClick(position, true);
+
+    // Move the mouse outside of the marker.
+    fireMouseEvent('mousemove', {
+      offsetX: 0,
+      offsetY: 0,
+      pageX: 0,
+      pageY: 0,
+    });
+
+    // The double click shouldn't make the tooltip persisted.
+    expect(document.querySelector('.tooltip')).toBeFalsy();
   });
 
   it('only renders a single row when hovering', () => {

src/test/fixtures/utils.ts

@@ -491,11 +491,18 @@ export function findFillTextPositionFromDrawLog(
  */
 export function fireFullClick(
   element: HTMLElement,
-  options?: FakeMouseEventInit
+  options?: FakeMouseEventInit,
+  dblClick?: boolean
 ) {
   fireEvent(element, getMouseEvent('mousedown', options));
   fireEvent(element, getMouseEvent('mouseup', options));
   fireEvent(element, getMouseEvent('click', options));
+  if (dblClick) {
+    fireEvent(element, getMouseEvent('mousedown', options));
+    fireEvent(element, getMouseEvent('mouseup', options));
+    fireEvent(element, getMouseEvent('click', options));
+    fireEvent(element, getMouseEvent('dblclick', options));
+  }
 }
 
 /**