Reset tooltip when calling Chart.update (#4840)

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 241448dadd7366686e5c56dbb01a9f45115a3e46..9e4984a9af6026bfbc7e219f62ec649c51f51b6c 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -371,6 +371,14 @@ module.exports = function(Chart) {
 
                        me.updateDatasets();
 
+                       // Need to reset tooltip in case it is displayed with elements that are removed
+                       // after update.
+                       me.tooltip.initialize();
+
+                       // Last active contains items that were previously in the tooltip.
+                       // When we reset the tooltip, we need to clear it
+                       me.lastActive = [];
+
                        // Do this before render so that any plugins that need final scale updates can use it
                        plugins.notify(me, 'afterUpdate');
 

diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js
index 76e06d06141f8d3e8e1bce0bc75d4d93074a605a..73460f8d106401376fd6c225acf13f4ec2e0b405 100644 (file)
--- a/src/core/core.tooltip.js
+++ b/src/core/core.tooltip.js
@@ -384,6 +384,7 @@ module.exports = function(Chart) {
        Chart.Tooltip = Element.extend({
                initialize: function() {
                        this._model = getBaseModel(this._options);
+                       this._lastActive = [];
                },
 
                // Get the title

diff --git a/test/specs/core.controller.tests.js b/test/specs/core.controller.tests.js
index fe73d02a0c23b806e91f7acb0d3aafbac13361c8..3ec8da50b76c5d9f67276b05395a4f7f484614f8 100644 (file)
--- a/test/specs/core.controller.tests.js
+++ b/test/specs/core.controller.tests.js
@@ -822,6 +822,54 @@ describe('Chart', function() {
                        expect(chart.tooltip._options).toEqual(jasmine.objectContaining(newTooltipConfig));
                });
 
+               it ('should reset the tooltip on update', function() {
+                       var chart = acquireChart({
+                               type: 'line',
+                               data: {
+                                       labels: ['A', 'B', 'C', 'D'],
+                                       datasets: [{
+                                               data: [10, 20, 30, 100]
+                                       }]
+                               },
+                               options: {
+                                       responsive: true,
+                                       tooltip: {
+                                               mode: 'nearest'
+                                       }
+                               }
+                       });
+
+                       // Trigger an event over top of a point to
+                       // put an item into the tooltip
+                       var meta = chart.getDatasetMeta(0);
+                       var point = meta.data[1];
+
+                       var node = chart.canvas;
+                       var rect = node.getBoundingClientRect();
+
+                       var evt = new MouseEvent('mousemove', {
+                               view: window,
+                               bubbles: true,
+                               cancelable: true,
+                               clientX: rect.left + point._model.x,
+                               clientY: 0
+                       });
+
+                       // Manually trigger rather than having an async test
+                       node.dispatchEvent(evt);
+
+                       // Check and see if tooltip was displayed
+                       var tooltip = chart.tooltip;
+
+                       expect(chart.lastActive).toEqual([point]);
+                       expect(tooltip._lastActive).toEqual([]);
+
+                       // Update and confirm tooltip is reset
+                       chart.update();
+                       expect(chart.lastActive).toEqual([]);
+                       expect(tooltip._lastActive).toEqual([]);
+               });
+
                it ('should update the metadata', function() {
                        var cfg = {
                                data: {