Tooltip fixes (getLabelAndValue on null controller, null getParsed) (#11596)

* Fix for getLabelAndValue on null controller

I encountered #11315 under the following circumstances:

1. Position the cursor over the chart area, such that it causes a
   tooltip to be shown.
2. Move the cursor out of the chart area, such that the tooltip remains
   visible.
3. Cause the chart contents to be changed, such that the dataset
   referenced by the active tooltip element is no longer valid.
4. Move the mouse again.  This triggers an `inChartArea = false` event,
   so it reuses the previous, now invalid, active elements.

This fixes #11315 under the circumstances for which I've reproduced it,
but there may be others.

* Further fixes for elements added / changed

This possibly fixes #11365.

diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js
index 2e881417f786cac09d9f9512f0db5d1866e84012..05b5fb9470d040b2abb8b80584bb321c359550c7 100644 (file)
--- a/src/plugins/plugin.tooltip.js
+++ b/src/plugins/plugin.tooltip.js
@@ -1182,7 +1182,11 @@ export class Tooltip extends Element {
 
     if (!inChartArea) {
       // Let user control the active elements outside chartArea. Eg. using Legend.
-      return lastActive;
+      // But make sure that active elements are still valid.
+      return lastActive.filter(i =>
+        this.chart.data.datasets[i.datasetIndex] &&
+        this.chart.getDatasetMeta(i.datasetIndex).controller.getParsed(i.index) !== undefined
+      );
     }
 
     // Find Active Elements for tooltips

diff --git a/test/specs/plugin.tooltip.tests.js b/test/specs/plugin.tooltip.tests.js
index da0563f6253418f7e55d597769f71f74102c3b56..3314ce1385d4295188e8b64f143eadbcc6fb71ed 100644 (file)
--- a/test/specs/plugin.tooltip.tests.js
+++ b/test/specs/plugin.tooltip.tests.js
@@ -1667,6 +1667,91 @@ describe('Plugin.Tooltip', function() {
     });
   });
 
+  it('should tolerate datasets removed on events outside chartArea', async function() {
+    const dataset1 = {
+      label: 'Dataset 1',
+      data: [10, 20, 30],
+    };
+    const dataset2 = {
+      label: 'Dataset 2',
+      data: [10, 25, 35],
+    };
+    const chart = window.acquireChart({
+      type: 'line',
+      data: {
+        datasets: [dataset1, dataset2],
+        labels: ['Point 1', 'Point 2', 'Point 3']
+      },
+      options: {
+        plugins: {
+          tooltip: {
+            mode: 'index',
+            intersect: false
+          }
+        }
+      }
+    });
+
+    const meta = chart.getDatasetMeta(0);
+    const point = meta.data[1];
+    const expectedPoints = [jasmine.objectContaining({datasetIndex: 0, index: 1}), jasmine.objectContaining({datasetIndex: 1, index: 1})];
+
+    await jasmine.triggerMouseEvent(chart, 'mousemove', point);
+    await jasmine.triggerMouseEvent(chart, 'mousemove', {x: chart.chartArea.left - 5, y: point.y});
+
+    expect(chart.tooltip.getActiveElements()).toEqual(expectedPoints);
+
+    chart.data.datasets = [dataset1];
+    chart.update();
+
+    await jasmine.triggerMouseEvent(chart, 'mousemove', {x: 2, y: 1});
+
+    expect(chart.tooltip.getActiveElements()).toEqual([expectedPoints[0]]);
+  });
+
+  it('should tolerate elements removed on events outside chartArea', async function() {
+    const dataset1 = {
+      label: 'Dataset 1',
+      data: [10, 20, 30],
+    };
+    const dataset2 = {
+      label: 'Dataset 2',
+      data: [10, 25, 35],
+    };
+    const chart = window.acquireChart({
+      type: 'line',
+      data: {
+        datasets: [dataset1, dataset2],
+        labels: ['Point 1', 'Point 2', 'Point 3']
+      },
+      options: {
+        plugins: {
+          tooltip: {
+            mode: 'index',
+            intersect: false
+          }
+        }
+      }
+    });
+
+    const meta = chart.getDatasetMeta(0);
+    const point = meta.data[1];
+    const expectedPoints = [jasmine.objectContaining({datasetIndex: 0, index: 1}), jasmine.objectContaining({datasetIndex: 1, index: 1})];
+
+    await jasmine.triggerMouseEvent(chart, 'mousemove', point);
+    await jasmine.triggerMouseEvent(chart, 'mousemove', {x: chart.chartArea.left - 5, y: point.y});
+
+    expect(chart.tooltip.getActiveElements()).toEqual(expectedPoints);
+
+    dataset1.data = dataset1.data.slice(0, 1);
+    chart.data.datasets = [dataset1];
+    chart.update();
+
+    await jasmine.triggerMouseEvent(chart, 'mousemove', {x: 2, y: 1});
+
+    expect(chart.tooltip.getActiveElements()).toEqual([]);
+  });
+
   describe('events', function() {
     it('should not be called on events not in plugin events array', async function() {
       var chart = window.acquireChart({